labsense-ui-kit 1.0.39 → 1.1.0

package/dist/index.modern.js

@@ -1,10 +1,161 @@
 import React, { useState, useRef, useEffect } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes, styled as styled$1 } from 'styled-components';
+import { useNavigate, NavLink, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-hot-toast';
 
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
+var colorVariables = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#14171A',
+    light: '#FFFFFF'
+  },
+  accent: {
+    light: '#E1E8ED',
+    extraLight: '#F5F8FA',
+    softBlue: '#D4EEFF',
+    extraSoftBlue: '#E4F4FF',
+    boldTransparent: '#5E5E5E80',
+    transparent: '#5E5E5E4D',
+    lightTransparent: '#5E5E5E23'
+  },
+  "default": {
+    primary: '#78B6F0',
+    secondary: '#C2C2C2',
+    tertiary: 'transparent',
+    error: '#F44336',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    info: '#2159F3'
+  },
+  disabled: {
+    primary: '#B9DCF7',
+    secondary: '#DADADA',
+    error: '#FFEBEE',
+    success: '#E8F5E9',
+    warning: '#FFF3E0',
+    info: '#E3F2FD'
+  },
+  hover: {
+    primary: '#4C9EEB',
+    secondary: '#A3A3A3',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#193ED2'
+  },
+  border: {
+    extraBold: '#657786',
+    bold: '#BFBFBF',
+    medium: '#CBCED0',
+    light: '#DCDCDC',
+    extraLight: '#E6E3E3'
+  },
+  text: {
+    dark: '#14171A',
+    medium: '#657786',
+    light: '#98A2AA',
+    white: '#FFFFFF',
+    success: '#1B5E20',
+    error: '#B71C1C',
+    info: '#0D30A1',
+    warning: '#E65100'
+  },
+  badge: {
+    lavender: '#E8DAFF',
+    papayaWhip: '#FFEDD5',
+    water: '#C7E3FF',
+    paleBlue: '#B0F0E4',
+    teaGreen: '#D5F7C2',
+    lightBlue: '#ADD8E6'
+  }
+};
+var darkColorVariables = {
+  brand: {
+    primary: '#4C9EEB',
+    secondary: '#FFFFFF',
+    light: '#1A1A1A'
+  },
+  accent: {
+    light: '#2F2F2F',
+    extraLight: '#1E1E1E',
+    softBlue: '#7A7A7A',
+    extraSoftBlue: '#2A3C50',
+    boldTransparent: '#AFAF80',
+    transparent: '#AFAF4D',
+    lightTransparent: '#AFAF23'
+  },
+  "default": {
+    primary: '#3B82F6',
+    secondary: '#B0B0B0',
+    tertiary: 'transparent',
+    error: '#F44336',
+    success: '#4CAF50',
+    warning: '#FF9800',
+    info: '#2159F3'
+  },
+  disabled: {
+    primary: '#B9DCF7',
+    secondary: '#3B3B3B',
+    error: '#FFEBEE',
+    success: '#E8F5E9',
+    warning: '#FFF3E0',
+    info: '#E3F2FD'
+  },
+  hover: {
+    primary: '#4C9EEB',
+    secondary: '#A3A3A3',
+    tertiary: 'transparent',
+    error: '#D32F2F',
+    success: '#388E3C',
+    warning: '#F57C00',
+    info: '#1976D2'
+  },
+  border: {
+    extraBold: '#657786',
+    bold: '#BFBFBF',
+    medium: '#CBCED0',
+    light: '#7A7A7A',
+    extraLight: '#E6E3E3'
+  },
+  text: {
+    dark: '#FFFFFF',
+    medium: '#C7C7C7',
+    light: '#A0A0A0',
+    white: '#FFFFFF',
+    success: '#1B5E20',
+    error: '#B71C1C',
+    info: '#0D30A1',
+    warning: '#E65100'
+  },
+  badge: {
+    lavender: '#E8DAFF',
+    papayaWhip: '#FFEDD5',
+    water: '#C7E3FF',
+    paleBlue: '#B0F0E4',
+    teaGreen: '#D5F7C2',
+    lightBlue: '#ADD8E6'
+  }
+};
+var themes = {
+  light: colorVariables,
+  dark: darkColorVariables
+};
+
 var Add = function Add(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -2497,8 +2648,8 @@ var Zapper = function Zapper(_ref) {
 var _templateObject, _templateObject2, _templateObject3;
 var wrapperCss = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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';
+  var $clickable = _ref.$clickable;
+  return $clickable ? 'pointer' : 'default';
 }, wrapperCss);
 var IconWrapperForSVG = styled.g(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), wrapperCss);
 var IconSVGs = {
@@ -2621,7 +2772,7 @@ var Icon = function Icon(_ref2) {
   }
   return React.createElement(IconWrapper, {
     onClick: onClick,
-    clickable: !!onClick
+    "$clickable": !!onClick
   }, React.createElement(IconSVG, {
     size: size,
     color: color,
@@ -2629,156 +2780,311 @@ var Icon = function Icon(_ref2) {
   }));
 };
 
-var colorVariables = {
-  brand: {
-    primary: "#4C9EEB",
-    secondary: "#14171A",
-    light: "#FFFFFF"
-  },
-  accent: {
-    light: "#E1E8ED",
-    extraLight: "#F5F8FA",
-    softBlue: "#D4EEFF",
-    extraSoftBlue: "#E4F4FF",
-    boldTransparent: '#5E5E5E80',
-    transparent: "#5E5E5E4D",
-    lightTransparent: "#5E5E5E23"
-  },
-  "default": {
-    primary: "#78B6F0",
-    secondary: '#C2C2C2',
-    tertiary: 'transparent',
-    error: "#F44336",
-    success: "#4CAF50",
-    warning: "#FF9800",
-    info: "#2159F3"
-  },
-  disabled: {
-    primary: "#B9DCF7",
-    secondary: '#DADADA',
-    error: "#FFEBEE",
-    success: "#E8F5E9",
-    warning: "#FFF3E0",
-    info: "#E3F2FD"
-  },
-  hover: {
-    primary: "#4C9EEB",
-    secondary: '#A3A3A3',
-    tertiary: 'transparent',
-    error: "#D32F2F",
-    success: "#388E3C",
-    warning: "#F57C00",
-    info: "#193ED2"
-  },
-  border: {
-    extraBold: "#657786",
-    bold: "#BFBFBF",
-    medium: "#CBCED0",
-    light: "#DCDCDC",
-    extraLight: "#E6E3E3"
-  },
-  text: {
-    dark: "#14171A",
-    medium: "#657786",
-    light: "#98A2AA",
-    white: "#FFFFFF",
-    success: "#1B5E20",
-    error: "#B71C1C",
-    info: "#0D30A1",
-    warning: "#E65100"
-  },
-  badge: {
-    lavender: '#E8DAFF',
-    papayaWhip: '#FFEDD5',
-    water: '#C7E3FF',
-    paleBlue: '#B0F0E4',
-    teaGreen: '#D5F7C2',
-    lightBlue: '#ADD8E6'
-  }
-};
-var darkColorVariables = {
-  brand: {
-    primary: "#4C9EEB",
-    secondary: "#FFFFFF",
-    light: "#1A1A1A"
-  },
-  accent: {
-    light: "#2F2F2F",
-    extraLight: "#1E1E1E",
-    softBlue: "#7A7A7A",
-    extraSoftBlue: "#2A3C50",
-    boldTransparent: '#AFAF80',
-    transparent: "#AFAF4D",
-    lightTransparent: "#AFAF23"
-  },
-  "default": {
-    primary: "#3B82F6",
-    secondary: '#B0B0B0',
-    tertiary: 'transparent',
-    error: "#F44336",
-    success: "#4CAF50",
-    warning: "#FF9800",
-    info: "#2159F3"
-  },
-  disabled: {
-    primary: "#B9DCF7",
-    secondary: "#3B3B3B",
-    error: "#FFEBEE",
-    success: "#E8F5E9",
-    warning: "#FFF3E0",
-    info: "#E3F2FD"
-  },
-  hover: {
-    primary: "#4C9EEB",
-    secondary: '#A3A3A3',
-    tertiary: 'transparent',
-    error: "#D32F2F",
-    success: "#388E3C",
-    warning: "#F57C00",
-    info: "#1976D2"
-  },
-  border: {
-    extraBold: "#657786",
-    bold: "#BFBFBF",
-    medium: "#CBCED0",
-    light: "#7A7A7A",
-    extraLight: "#E6E3E3"
-  },
-  text: {
-    dark: "#FFFFFF",
-    medium: "#C7C7C7",
-    light: "#A0A0A0",
-    white: "#FFFFFF",
-    success: "#1B5E20",
-    error: "#B71C1C",
-    info: "#0D30A1",
-    warning: "#E65100"
-  },
-  badge: {
-    lavender: '#E8DAFF',
-    papayaWhip: '#FFEDD5',
-    water: '#C7E3FF',
-    paleBlue: '#B0F0E4',
-    teaGreen: '#D5F7C2',
-    lightBlue: '#ADD8E6'
-  }
+var _templateObject$1, _templateObject2$1;
+var Container = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: ", ";\n  flex-wrap: ", ";\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";  \n  gap: ", ";\n  font-weight: ", ";\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n  padding: ", ";\n  background: ", ";\n  object-fit:", ";\n  margin: ", ";\n  border-radius: ", ";\n  cursor: ", ";\n  font-size: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  position: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  right: ", ";\n  text-align: ", "; \n  color: ", "; \n  overflow: ", ";\n  overflow-y: ", ";\n  z-index: ", "; \n  scrollbar-width: ", ";\n  border: ", "; \n  border-bottom: ", "; \n\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 $cursor = _ref19.$cursor;
+  return $cursor;
+}, function (_ref20) {
+  var $fontSize = _ref20.$fontSize;
+  return $fontSize;
+}, function (_ref21) {
+  var $opacity = _ref21.$opacity;
+  return $opacity;
+}, function (_ref22) {
+  var $pointerEvents = _ref22.$pointerEvents;
+  return $pointerEvents;
+}, function (_ref23) {
+  var $position = _ref23.$position;
+  return $position;
+}, function (_ref24) {
+  var $top = _ref24.$top;
+  return $top;
+}, function (_ref25) {
+  var $bottom = _ref25.$bottom;
+  return $bottom;
+}, function (_ref26) {
+  var $left = _ref26.$left;
+  return $left;
+}, function (_ref27) {
+  var $right = _ref27.$right;
+  return $right;
+}, function (_ref28) {
+  var $textAlign = _ref28.$textAlign;
+  return $textAlign;
+}, function (_ref29) {
+  var $color = _ref29.$color;
+  return $color;
+}, function (_ref30) {
+  var $overflow = _ref30.$overflow;
+  return $overflow || 'visible';
+}, function (_ref31) {
+  var $overflowY = _ref31.$overflowY;
+  return $overflowY;
+}, function (_ref32) {
+  var $zIndex = _ref32.$zIndex;
+  return $zIndex;
+}, function (_ref33) {
+  var $scrollbarWidth = _ref33.$scrollbarWidth;
+  return $scrollbarWidth;
+}, function (_ref34) {
+  var $border = _ref34.$border;
+  return $border;
+}, function (_ref35) {
+  var $bottomborder = _ref35.$bottomborder;
+  return $bottomborder;
+}, function (_ref36) {
+  var $hoverBackground = _ref36.$hoverBackground;
+  return $hoverBackground;
+}, function (_ref37) {
+  var $hoverColor = _ref37.$hoverColor;
+  return $hoverColor;
+});
+var Span = styled.span(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  min-width: ", ";\n  width: ", ";\n  overflow-wrap: ", ";\n"])), function (_ref38) {
+  var $fontFamily = _ref38.$fontFamily;
+  return $fontFamily ? $fontFamily : 'NotoSans, sans-serif';
+}, function (_ref39) {
+  var $fontWeight = _ref39.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref40) {
+  var $fontSize = _ref40.$fontSize;
+  return $fontSize ? $fontSize : '16px';
+}, function (_ref41) {
+  var color = _ref41.color;
+  return color ? color : colorVariables.text.medium;
+}, function (_ref42) {
+  var $lineHeight = _ref42.$lineHeight;
+  return $lineHeight ? $lineHeight : '100%';
+}, function (_ref43) {
+  var $textAlign = _ref43.$textAlign;
+  return $textAlign ? $textAlign : 'center';
+}, function (_ref44) {
+  var $minWidth = _ref44.$minWidth;
+  return $minWidth;
+}, function (_ref45) {
+  var $width = _ref45.$width;
+  return $width;
+}, function (_ref46) {
+  var $overflowWrap = _ref46.$overflowWrap;
+  return $overflowWrap;
+});
+
+var _templateObject$2, _templateObject2$2;
+var TooltipWrapper = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  svg {\n    cursor: pointer;\n  }  \n"])));
+var TooltipText = styled.span(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  opacity: ", ";\n  width: max-content;\n  max-width: 300px;\n  background-color: ", ";\n  color: ", ";\n  text-align: start;\n  border-radius: 8px;\n  padding:8px 16px;\n  transition: opacity 0.2s ease-in-out;\n  font-size: 12px;\n\n  // position: absolute;\n  // left: 0;\n  // bottom: 150%;\n  // white-space: pre-line;\n  // position: fixed;\n  // z-index: 99999;\n  // transition: opacity 0.2s ease-in-out;\n  // font-size: 12px;\n  // pointer-events: auto;\n"])), function (_ref) {
+  var $visible = _ref.$visible;
+  return $visible ? 'visible' : 'hidden';
+}, function (_ref2) {
+  var $visible = _ref2.$visible;
+  return $visible ? 1 : 0;
+}, function (_ref3) {
+  var $bgColor = _ref3.$bgColor;
+  return $bgColor || colorVariables.brand.light;
+}, colorVariables.text.medium);
+var Badge = function Badge(_ref4) {
+  var text = _ref4.text,
+    _ref4$height = _ref4.height,
+    height = _ref4$height === void 0 ? '24px' : _ref4$height,
+    _ref4$fontSize = _ref4.fontSize,
+    fontSize = _ref4$fontSize === void 0 ? '12px' : _ref4$fontSize,
+    _ref4$padding = _ref4.padding,
+    padding = _ref4$padding === void 0 ? '6px 8px' : _ref4$padding,
+    background = _ref4.background,
+    textColor = _ref4.textColor,
+    _ref4$icon = _ref4.icon,
+    icon = _ref4$icon === void 0 ? {
+      icon: 'Information',
+      size: 10,
+      weight: '0.1px',
+      color: colorVariables.text.medium
+    } : _ref4$icon,
+    tooltipText = _ref4.tooltipText;
+  var _useState = useState(false),
+    showTooltip = _useState[0],
+    setShowTooltip = _useState[1];
+  var wrapperRef = useRef(null);
+  var _useState2 = useState({}),
+    tooltipStyle = _useState2[0],
+    setTooltipStyle = _useState2[1];
+  var handleMouseEnter = function handleMouseEnter() {
+    setShowTooltip(true);
+    if (wrapperRef.current) {
+      var rect = wrapperRef.current.getBoundingClientRect();
+      setTooltipStyle({
+        position: 'fixed',
+        left: rect.left,
+        top: rect.top - 8,
+        transform: 'translateY(-100%)',
+        zIndex: 10,
+        pointerEvents: 'auto'
+      });
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    return setShowTooltip(false);
+  };
+  return React.createElement(Container, {
+    ref: wrapperRef,
+    "$height": height,
+    "$padding": padding,
+    "$borderRadius": '4px',
+    "$background": background,
+    "$alignItems": 'center',
+    "$justifyContent": 'center',
+    "$width": 'fit-content',
+    "$gap": '4px',
+    "$position": 'relative'
+  }, tooltipText && icon && React.createElement(TooltipWrapper, {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, React.createElement(Icon, {
+    icon: icon.icon,
+    size: icon.size,
+    weight: icon.weight,
+    color: icon.color
+  }), showTooltip && React.createElement(TooltipText, {
+    "$bgColor": background,
+    "$visible": showTooltip,
+    style: tooltipStyle
+  }, tooltipText)), React.createElement(Span, {
+    "$fontSize": fontSize,
+    "$fontWeight": '500',
+    "$color": textColor,
+    "$lineHeight": '12px'
+  }, text));
 };
-var themes = {
-  light: colorVariables,
-  dark: darkColorVariables
+
+var _templateObject$3;
+var BreadCrum = styled.span(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-size: 12px;\n  color: ", ";\n  line-height: 100%;\n  text-align: center;\n  opacity: ", ";\n  \n  &:hover {\n    text-decoration: ", ";\n    cursor: ", ";\n    color: ", ";\n  }\n"])), function (_ref) {
+  var $color = _ref.$color;
+  return $color ? $color : colorVariables.text.medium;
+}, function (_ref2) {
+  var $disabled = _ref2.$disabled;
+  return $disabled ? '0.6' : '1';
+}, function (_ref3) {
+  var $hover = _ref3.$hover,
+    $disabled = _ref3.$disabled;
+  return $hover && !$disabled && 'underline';
+}, function (_ref4) {
+  var $hover = _ref4.$hover,
+    $disabled = _ref4.$disabled;
+  return $hover && !$disabled ? 'pointer' : 'default';
+}, function (_ref5) {
+  var $hover = _ref5.$hover,
+    $disabled = _ref5.$disabled;
+  return $hover && !$disabled && colorVariables["default"].primary;
+});
+var Breadcrumbs = function Breadcrumbs(_ref6) {
+  var _breadcrumbs$;
+  var backLink = _ref6.backLink,
+    _ref6$disabled = _ref6.disabled,
+    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    breadcrumbs = _ref6.breadcrumbs,
+    onBackClick = _ref6.onBackClick;
+  var navigate = useNavigate();
+  var _useState = useState(false),
+    hovered = _useState[0],
+    setHovered = _useState[1];
+  return React.createElement(Container, {
+    "$gap": '8px',
+    "$justifyContent": 'center',
+    "$alignItems": 'center'
+  }, backLink && React.createElement(Span, {
+    "$fontSize": '12px',
+    "$fontWeight": '400',
+    "$color": hovered ? 'primaryColor' : 'textColor',
+    onMouseEnter: function onMouseEnter() {
+      return setHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovered(false);
+    },
+    onClick: onBackClick
+  }, (_breadcrumbs$ = breadcrumbs[0]) === null || _breadcrumbs$ === void 0 ? void 0 : _breadcrumbs$.text), breadcrumbs.map(function (breadcrumb, index) {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, index > 0 && React.createElement(Span, {
+      "$fontSize": '12px',
+      "$fontWeight": '400'
+    }, React.createElement(Icon, {
+      icon: 'RightArrow',
+      size: 5,
+      color: colorVariables.text.medium
+    })), React.createElement(BreadCrum, {
+      onClick: function onClick() {
+        if (breadcrumb.navigateLink) navigate(breadcrumb.navigateLink);
+      },
+      "$hover": breadcrumb.navigateLink ? true : false,
+      "$disabled": disabled,
+      "$color": breadcrumb.navigateLink ? colorVariables.text.dark : colorVariables.text.medium
+    }, breadcrumb.text));
+  }));
 };
 
-var _templateObject$1;
-var fontFaces = css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\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 _templateObject$4;
+var fontFaces = css(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\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 = {
-  bold: "NotoSans, sans-serif",
-  regular: "NotoSans, sans-serif",
-  light: "NotoSans, sans-serif"
+  bold: 'NotoSans, sans-serif',
+  regular: 'NotoSans, sans-serif',
+  light: 'NotoSans, sans-serif'
 };
 
-var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6;
-var spin = keyframes(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Spinner = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\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 _templateObject$5, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6;
+var spin = keyframes(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\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) {
@@ -2798,7 +3104,7 @@ var LoaderWrapper = styled.div(_templateObject3$1 || (_templateObject3$1 = _tagg
   var loaderPosition = _ref6.loaderPosition;
   return loaderPosition === 'left' ? '4px' : '0';
 });
-var Container = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", ";\n  svg {\n    cursor: ", ";\n  }\n"])), function (_ref7) {
+var Container$1 = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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) {
@@ -2809,43 +3115,43 @@ var Container = styled.div(_templateObject4 || (_templateObject4 = _taggedTempla
   return cursor;
 });
 var StyledButton = styled.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  pointer-events: ", ";\n  cursor: ", ";\n  height: max-content;\n  min-height: max-content;\n  width: max-content;\n  box-sizing: border-box;\n  border-radius: ", ";\n  outline: none;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  color: ", "; \n"])), function (_ref10) {
-  var disabled = _ref10.disabled;
-  return disabled ? 'none' : 'auto';
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'none' : 'auto';
 }, function (_ref11) {
-  var disabled = _ref11.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
+  var $disabled = _ref11.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
 }, function (_ref12) {
-  var borderRadius = _ref12.borderRadius;
-  return borderRadius || '8px';
+  var $borderRadius = _ref12.$borderRadius;
+  return $borderRadius || '8px';
 }, function (_ref13) {
-  var size = _ref13.size,
-    padding = _ref13.padding;
-  return size === 'small' ? '8px 12.2px' : size === 'medium' ? '10px 19px' : size === 'large' ? '12px 24.5px' : size === 'custom' ? padding : '10px 16px';
+  var $size = _ref13.$size,
+    $padding = _ref13.$padding;
+  return $size === 'small' ? '8px 12.2px' : $size === 'medium' ? '10px 19px' : $size === 'large' ? '12px 24.5px' : $size === 'custom' ? $padding : '10px 16px';
 }, function (_ref14) {
-  var _borderHover$match;
-  var variant = _ref14.variant,
-    disabled = _ref14.disabled,
-    borderHover = _ref14.borderHover,
-    borderDefault = _ref14.borderDefault,
-    background = _ref14.background,
-    color = _ref14.color;
-  switch (variant) {
+  var _$borderHover$match;
+  var $variant = _ref14.$variant,
+    $disabled = _ref14.$disabled,
+    $borderHover = _ref14.$borderHover,
+    $borderDefault = _ref14.$borderDefault,
+    $background = _ref14.$background,
+    $color = _ref14.$color;
+  switch ($variant) {
     case 'primary':
-      return "\n          background: " + (disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          color: " + colorVariables.text.white + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.primary : "1px solid " + colorVariables["default"].primary) + ";\n          &:hover {\n            background: " + colorVariables.hover.primary + ";\n            border: 1px solid " + colorVariables.hover.primary + ";\n          }\n        ";
+      return "\n          background: " + ($disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          color: " + colorVariables.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables.disabled.primary : "1px solid " + colorVariables["default"].primary) + ";\n          &:hover {\n            background: " + colorVariables.hover.primary + ";\n            border: 1px solid " + colorVariables.hover.primary + ";\n          }\n        ";
     case 'secondary':
-      return "\n          background: " + (disabled ? colorVariables.disabled.secondary : colorVariables["default"].secondary) + "; \n          color: " + colorVariables.text.white + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.secondary : "1px solid " + colorVariables["default"].secondary) + ";\n          &:hover{\n           background: " + colorVariables.hover.secondary + ";\n           border: 1px solid " + colorVariables.hover.secondary + ";\n          }\n        ";
+      return "\n          background: " + ($disabled ? colorVariables.disabled.secondary : colorVariables["default"].secondary) + "; \n          color: " + colorVariables.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables.disabled.secondary : "1px solid " + colorVariables["default"].secondary) + ";\n          &:hover{\n           background: " + colorVariables.hover.secondary + ";\n           border: 1px solid " + colorVariables.hover.secondary + ";\n          }\n        ";
     case 'tertiary':
-      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + (disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          border: " + (borderDefault ? "" + borderDefault : "1px solid " + colorVariables["default"].tertiary) + ";\n          &:hover {\n            color: " + (!disabled && borderHover ? (_borderHover$match = borderHover.match(/#\w+/)) === null || _borderHover$match === void 0 ? void 0 : _borderHover$match[0] : colorVariables.hover.primary) + ";\n            border: " + (borderHover ? borderHover : "1px solid " + colorVariables.hover.primary) + ";\n          }\n        ";
+      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          border: " + ($borderDefault ? "" + $borderDefault : "1px solid " + colorVariables["default"].tertiary) + ";\n          &:hover {\n            color: " + (!$disabled && $borderHover ? (_$borderHover$match = $borderHover.match(/#\w+/)) === null || _$borderHover$match === void 0 ? void 0 : _$borderHover$match[0] : colorVariables.hover.primary) + ";\n            border: " + ($borderHover ? $borderHover : "1px solid " + colorVariables.hover.primary) + ";\n          }\n        ";
     case 'error':
-      return "\n          background: " + (disabled ? colorVariables.disabled.error : colorVariables["default"].error) + "; \n          color: " + colorVariables.text.white + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.error : "1px solid " + colorVariables["default"].error) + ";\n          &:hover{\n           background: " + colorVariables.hover.error + ";\n           border: 1px solid " + colorVariables.hover.error + ";\n          }\n        ";
+      return "\n          background: " + ($disabled ? colorVariables.disabled.error : colorVariables["default"].error) + "; \n          color: " + colorVariables.text.white + ";\n          border: " + ($disabled ? "1px solid " + colorVariables.disabled.error : "1px solid " + colorVariables["default"].error) + ";\n          &:hover{\n           background: " + colorVariables.hover.error + ";\n           border: 1px solid " + colorVariables.hover.error + ";\n          }\n        ";
     case 'outline-primary':
-      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + (disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.primary : "1px solid " + colorVariables["default"].primary) + ";\n          &:hover{\n            border: 1px solid " + colorVariables.hover.primary + ";\n            color: " + colorVariables.text.white + ";\n            background: " + colorVariables.hover.primary + ";\n          }\n        ";
+      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables.disabled.primary : colorVariables["default"].primary) + ";\n          border: " + ($disabled ? "1px solid " + colorVariables.disabled.primary : "1px solid " + colorVariables["default"].primary) + ";\n          &:hover{\n            border: 1px solid " + colorVariables.hover.primary + ";\n            color: " + colorVariables.text.white + ";\n            background: " + colorVariables.hover.primary + ";\n          }\n        ";
     case 'outline-secondary':
-      return "\n            background: " + colorVariables["default"].tertiary + ";\n            color: " + (disabled ? colorVariables.disabled.secondary : colorVariables["default"].secondary) + ";\n            border: " + (disabled ? "1px solid " + colorVariables.disabled.secondary : "1px solid " + colorVariables["default"].secondary) + ";\n            &:hover{\n              border: 1px solid " + colorVariables.hover.secondary + ";\n              color: " + colorVariables.text.white + ";\n              background: " + colorVariables.hover.secondary + ";\n            }\n        ";
+      return "\n            background: " + colorVariables["default"].tertiary + ";\n            color: " + ($disabled ? colorVariables.disabled.secondary : colorVariables["default"].secondary) + ";\n            border: " + ($disabled ? "1px solid " + colorVariables.disabled.secondary : "1px solid " + colorVariables["default"].secondary) + ";\n            &:hover{\n              border: 1px solid " + colorVariables.hover.secondary + ";\n              color: " + colorVariables.text.white + ";\n              background: " + colorVariables.hover.secondary + ";\n            }\n        ";
     case 'outline-error':
-      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + (disabled ? colorVariables.disabled.error : colorVariables["default"].error) + ";\n          border: " + (disabled ? "1px solid " + colorVariables.disabled.error : "1px solid " + colorVariables["default"].error) + ";\n          &:hover{\n            border: 1px solid " + colorVariables.hover.error + ";\n            color: " + colorVariables.text.white + ";\n            background: " + colorVariables.hover.error + ";\n          }\n        ";
+      return "\n          background: " + colorVariables["default"].tertiary + ";\n          color: " + ($disabled ? colorVariables.disabled.error : colorVariables["default"].error) + ";\n          border: " + ($disabled ? "1px solid " + colorVariables.disabled.error : "1px solid " + colorVariables["default"].error) + ";\n          &:hover{\n            border: 1px solid " + colorVariables.hover.error + ";\n            color: " + colorVariables.text.white + ";\n            background: " + colorVariables.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: " + color + ";\n            background: " + borderHover + ";\n          }\n        ";
+      return "\n          background: " + $background + ";\n          color: " + $color + ";\n          border: " + ("1px solid " + $borderDefault) + ";\n          &:hover{\n            border: 1px solid " + $borderHover + ";\n            color: " + $color + ";\n            background: " + $borderHover + ";\n          }\n        ";
     default:
       return '';
   }
@@ -2910,21 +3216,21 @@ var ButtonComponent = function ButtonComponent(_ref20) {
   return React.createElement(StyledButton, {
     disabled: disabled,
     onClick: onClick,
-    background: background,
-    borderDefault: borderDefault,
-    borderHover: borderHover,
-    borderRadius: borderRadius,
-    size: size,
-    color: color,
-    padding: padding,
-    variant: variant,
+    "$background": background,
+    "$borderDefault": borderDefault,
+    "$borderHover": borderHover,
+    "$borderRadius": borderRadius,
+    "$size": size,
+    "$color": color,
+    "$padding": padding,
+    "$variant": variant,
     onMouseEnter: function onMouseEnter() {
       return setIsHovered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setIsHovered(false);
     }
-  }, React.createElement(Container, {
+  }, React.createElement(Container$1, {
     iconPosition: iconPos,
     gap: gap,
     cursor: !disabled && typeof onClick === 'function' ? 'pointer' : 'default'
@@ -2952,239 +3258,1490 @@ var ButtonComponent = function ButtonComponent(_ref20) {
   })));
 };
 
-var _templateObject$3, _templateObject2$2, _templateObject3$2;
-var InputContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  display: flex; \n  flex-direction : column;\n  justify-content : center; \n"])), function (_ref) {
-  var width = _ref.width;
-  return width || "100%";
-}, function (_ref2) {
-  var height = _ref2.height;
-  return height || "54px";
-}, function (_ref3) {
-  var borderRadius = _ref3.borderRadius;
-  return borderRadius || "4px";
-}, function (_ref4) {
-  var border = _ref4.border;
-  return border ? 'border' : '#657786';
-}, function (_ref5) {
-  var backgroundColor = _ref5.backgroundColor;
-  return backgroundColor || 'transparent';
-});
-var WrittenTextAfterInput = styled.p(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  position: relative; \n  top: 9px;\n  left: 8px;\n  width: auto;\n  height: auto;\n  font-family: NotoSans, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 14px;\n  text-align: left;\n  color: #4c9eeb;\n  margin: 2px;\n  visibility: ", ";\n"])), function (_ref6) {
-  var show = _ref6.show;
-  return show ? "visible" : "hidden";
-});
-var InputBlock = styled.input(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  color: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  font-family: NotoSans, sans-serif;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: left;\n  outline: none;\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref7) {
-  var width = _ref7.width;
-  return width || "100%";
-}, function (_ref8) {
-  var height = _ref8.height;
-  return height || "54px";
-}, function (_ref9) {
-  var borderRadius = _ref9.borderRadius;
-  return borderRadius || "4px";
-}, function (_ref10) {
-  var borderColor = _ref10.borderColor;
-  return borderColor || "transparent";
-}, function (_ref11) {
-  var backgroundColor = _ref11.backgroundColor;
-  return backgroundColor || "transparent";
-}, function (_ref12) {
-  var fontColor = _ref12.fontColor;
-  return fontColor || "#14171A";
-}, function (_ref13) {
-  var padding = _ref13.padding;
-  return padding || "8px";
-}, function (_ref14) {
-  var fontSize = _ref14.fontSize;
-  return fontSize || "16px";
-}, function (_ref15) {
-  var fontWeight = _ref15.fontWeight;
-  return fontWeight || 400;
-}, function (_ref16) {
-  var lineHeight = _ref16.lineHeight;
-  return lineHeight || '16px';
-}, function (_ref17) {
-  var fontColor = _ref17.fontColor;
-  return fontColor || "#AABBCC";
+var _templateObject$6;
+var InnerContent = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\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 MultiFunctionInputComponent = function MultiFunctionInputComponent(_ref18) {
-  var label = _ref18.label,
-    type = _ref18.type,
-    placeholder = _ref18.placeholder,
-    width = _ref18.width,
-    height = _ref18.height,
-    borderColor = _ref18.borderColor,
-    backgroundColor = _ref18.backgroundColor,
-    fontColor = _ref18.fontColor,
-    fontSize = _ref18.fontSize,
-    value = _ref18.value,
-    onChange = _ref18.onChange;
+var ButtonCarousel = function ButtonCarousel(_ref2) {
+  var contentLength = _ref2.contentLength,
+    innerNode = _ref2.innerNode;
+  var scrollRef = useRef(null);
   var _useState = useState(false),
-    blockText = _useState[0],
-    setBlockContent = _useState[1];
-  var inputRef = useRef(null);
-  var handleInputChange = function handleInputChange(e) {
-    setBlockContent(true);
-    var inputValue = e.target.value;
-    if (type === "phone" && inputValue.length > 10) {
-      inputValue = inputValue.slice(0, 10);
+    isScrollable = _useState[0],
+    setIsScrollable = _useState[1];
+  var checkScrollable = function checkScrollable() {
+    if (scrollRef.current) {
+      var _scrollRef$current = scrollRef.current,
+        scrollWidth = _scrollRef$current.scrollWidth,
+        clientWidth = _scrollRef$current.clientWidth;
+      setIsScrollable(scrollWidth > clientWidth);
     }
-    setBlockContent(inputValue.length > 0);
-    onChange(e);
   };
-  return React.createElement(InputContainer, {
-    width: width
-  }, React.createElement(WrittenTextAfterInput, {
-    show: blockText
-  }, label), React.createElement(InputBlock, {
-    ref: inputRef,
-    type: type === "phone" ? "tel" : type,
-    placeholder: placeholder || label,
-    width: width,
-    height: height,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor,
-    fontColor: fontColor,
-    fontSize: fontSize,
-    value: value,
-    onChange: handleInputChange
-  }));
-};
-
-var Tabs = function Tabs(_ref) {
-  return React.createElement("div", null, "Tab");
-};
-
-var ProgressBar = function ProgressBar(_ref) {
-  var _ref$totalSteps = _ref.totalSteps,
-    totalSteps = _ref$totalSteps === void 0 ? 4 : _ref$totalSteps;
-  var _useState = useState(0),
-    currentStep = _useState[0],
-    setCurrentStep = _useState[1];
   useEffect(function () {
-    var interval = setInterval(function () {
-      setCurrentStep(function (prevStep) {
-        if (prevStep < totalSteps) {
-          return prevStep + 1;
-        } else {
-          clearInterval(interval);
-          return totalSteps;
-        }
-      });
-    }, 1000);
+    checkScrollable();
+    window.addEventListener('resize', checkScrollable);
     return function () {
-      return clearInterval(interval);
+      return window.removeEventListener('resize', checkScrollable);
     };
-  }, [totalSteps]);
-  return React.createElement("div", {
-    style: {
-      width: "100%",
-      textAlign: "center"
-    }
-  }, React.createElement("p", {
-    style: {
-      fontSize: "14px",
-      fontWeight: "400",
-      marginBottom: "8px",
-      color: "#4C9EEB"
-    }
-  }, "Step ", currentStep, " out of ", totalSteps), React.createElement("div", {
-    style: {
-      width: "100%",
-      backgroundColor: "#f3f3f3",
-      borderRadius: "5px",
-      overflow: "hidden"
+  }, [contentLength]);
+  var scrollLeft = function scrollLeft() {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({
+        left: -150,
+        behavior: 'smooth'
+      });
     }
-  }, React.createElement("div", {
-    style: {
-      width: currentStep / totalSteps * 100 + "%",
-      height: "6px",
-      backgroundColor: "#4C9EEB",
-      transition: "width 0.5s ease-in-out"
+  };
+  var scrollRight = function scrollRight() {
+    if (scrollRef.current) {
+      scrollRef.current.scrollBy({
+        left: 150,
+        behavior: 'smooth'
+      });
     }
-  })));
+  };
+  var handleWheelScroll = function handleWheelScroll(event) {
+    if (!scrollRef.current || !isScrollable) return;
+    var scrollFactor = event.deltaMode === 1 ? 50 : 3;
+    var scrollAmount = event.deltaY * scrollFactor;
+    scrollRef.current.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth'
+    });
+  };
+  return React.createElement(Container, {
+    "$alignItems": 'center',
+    "$justifyContent": 'start',
+    "$height": '26px',
+    "$minHeight": '26px',
+    "$position": 'relative',
+    "$overflow": 'hidden',
+    "$width": '100%'
+  }, isScrollable && React.createElement(ButtonComponent, {
+    icon: 'LeftArrow',
+    size: 'custom',
+    variant: 'tertiary',
+    padding: '5px',
+    borderRadius: '50%',
+    onClick: scrollLeft,
+    iconSize: 10,
+    borderDefault: "2px solid " + colorVariables["default"].tertiary,
+    borderHover: "2px solid " + colorVariables.hover.primary
+  }), React.createElement(InnerContent, {
+    "$isScrollable": isScrollable,
+    ref: scrollRef,
+    onWheel: handleWheelScroll
+  }, innerNode), isScrollable && React.createElement(ButtonComponent, {
+    icon: 'RightArrow',
+    size: 'custom',
+    variant: 'tertiary',
+    padding: '5px',
+    borderRadius: '50%',
+    onClick: scrollRight,
+    iconSize: 10,
+    borderDefault: "2px solid " + colorVariables["default"].tertiary,
+    borderHover: "2px solid " + colorVariables.hover.primary
+  }));
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$1;
-var spin$1 = keyframes(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
-var getDotPosition = function getDotPosition(index, size) {
-  var angle = index * 360 / 8;
-  var radius = size / 2.5;
-  var x = radius * Math.cos(angle * Math.PI / 180);
-  var y = radius * Math.sin(angle * Math.PI / 180);
-  return "translate(" + x + "px, " + y + "px)";
+var convertToEpoch = function convertToEpoch(dateString) {
+  var date = new Date(dateString);
+  date.setMilliseconds(0);
+  return Math.floor(date.getTime() / 1000);
 };
-var SpinnerContainer = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
-  var size = _ref.size;
-  return size;
-}, function (_ref2) {
-  var size = _ref2.size;
-  return size;
-});
-var Dot = styled.div.attrs(function (_ref3) {
-  var index = _ref3.index,
-    size = _ref3.size;
-  return {
-    style: {
-      transform: getDotPosition(index, size)
+var formatDate = function formatDate(inputDate) {
+  var dateObj = new Date(inputDate);
+  var month = (dateObj.getMonth() + 1).toString().padStart(2, '0');
+  var day = dateObj.getDate().toString().padStart(2, '0');
+  return month + "/" + day;
+};
+var formatTimestamp = function formatTimestamp(input) {
+  if (!input) {
+    return '';
+  }
+  var date;
+  if (typeof input === 'string') {
+    var dateParts = input.split(/[/ :]/);
+    var _day = parseInt(dateParts[0], 10);
+    var monthStr = dateParts[1];
+    var _year = parseInt(dateParts[2], 10);
+    var _hours = parseInt(dateParts[3], 10);
+    var _minutes = parseInt(dateParts[4], 10);
+    var _month = new Date(Date.parse(monthStr + ' 1, 2021')).getMonth();
+    if (isNaN(_day) || isNaN(_month) || isNaN(_year) || isNaN(_hours) || isNaN(_minutes)) {
+      return '';
     }
-  };
-})(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: 50%;\n  animation: ", " ", "s linear infinite;\n  animation-delay: ", "s;\n"])), function (_ref4) {
-  var dotSize = _ref4.dotSize;
-  return dotSize;
-}, function (_ref5) {
-  var dotSize = _ref5.dotSize;
-  return dotSize;
-}, function (_ref6) {
-  var color = _ref6.color;
-  return color;
-}, spin$1, function (_ref7) {
-  var speed = _ref7.speed;
-  return speed;
-}, function (_ref8) {
-  var index = _ref8.index,
-    speed = _ref8.speed;
-  return index * speed / 8;
-});
-var SpinnerWrapper = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
-var sizeMap = {
-  small: {
-    size: 32
-  },
-  medium: {
-    size: 48
-  },
-  large: {
-    size: 64
+    date = new Date(Date.UTC(_year, _month, _day, _hours, _minutes));
+  } else {
+    date = input;
   }
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  return year + "/" + String(month).padStart(2, '0') + "/" + String(day).padStart(2, '0') + " - " + String(hours).padStart(2, '0') + ":" + String(minutes).padStart(2, '0');
 };
-var CircularLoader = function CircularLoader(_ref9) {
-  var _ref9$size = _ref9.size,
-    size = _ref9$size === void 0 ? "medium" : _ref9$size,
-    _ref9$color = _ref9.color,
-    color = _ref9$color === void 0 ? "black" : _ref9$color,
-    _ref9$dotSize = _ref9.dotSize,
-    dotSize = _ref9$dotSize === void 0 ? 8 : _ref9$dotSize,
-    _ref9$speed = _ref9.speed,
-    speed = _ref9$speed === void 0 ? 1.2 : _ref9$speed,
-    text = _ref9.text,
-    customSize = _ref9.customSize;
-  var spinnerSize = customSize != null ? customSize : sizeMap[size].size;
-  return React.createElement(SpinnerWrapper, null, React.createElement(SpinnerContainer, {
-    size: spinnerSize,
-    "aria-label": "Loading animation"
-  }, Array.from({
-    length: 8
-  }).map(function (_, i) {
-    return React.createElement(Dot, {
-      key: i,
-      index: i,
-      size: spinnerSize,
-      dotSize: dotSize,
-      color: color,
-      speed: speed
+var formatCalendarDateTime = function formatCalendarDateTime(input) {
+  if (!input) {
+    return '';
+  }
+  var date = input;
+  var timeZoneName = '';
+  var dateString = date.toString();
+  var match = dateString.match(/\(([^)]+)\)/);
+  if (match) {
+    timeZoneName = " (" + match[1] + ")";
+  }
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  return year + "/" + String(month).padStart(2, '0') + "/" + String(day).padStart(2, '0') + " - " + String(hours).padStart(2, '0') + ":" + String(minutes).padStart(2, '0') + timeZoneName;
+};
+var timeAgo = function timeAgo(input) {
+  if (!input) {
+    return '';
+  }
+  var dateParts = input.split(/[/ :]/);
+  var day = parseInt(dateParts[0], 10);
+  var monthStr = dateParts[1];
+  var year = parseInt(dateParts[2], 10);
+  var hours = parseInt(dateParts[3], 10);
+  var minutes = parseInt(dateParts[4], 10);
+  var month = new Date(Date.parse(monthStr + ' 1, 2021')).getMonth() + 1;
+  if (isNaN(day) || isNaN(month) || isNaN(year) || isNaN(hours) || isNaN(minutes)) {
+    return '';
+  }
+  var date = new Date(Date.UTC(year, month - 1, day, hours, minutes));
+  var now = new Date();
+  var diffMs = now.getTime() - date.getTime();
+  var diffMins = Math.floor(diffMs / (1000 * 60));
+  var diffHours = Math.floor(diffMins / 60);
+  var diffDays = Math.floor(diffHours / 24);
+  var diffMonths = Math.floor(diffDays / 30);
+  var diffYears = Math.floor(diffDays / 365);
+  if (diffYears >= 1) {
+    return diffYears + " " + ("DeviceLinks:tableText.timeAgoUnits." + (diffYears !== 1 ? 'years' : 'year'));
+  } else if (diffMonths >= 1) {
+    return diffMonths + " " + ("DeviceLinks:tableText.timeAgoUnits." + (diffMonths !== 1 ? 'months' : 'month'));
+  } else if (diffDays >= 1) {
+    return diffDays + " " + ("DeviceLinks:tableText.timeAgoUnits." + (diffDays !== 1 ? 'days' : 'day'));
+  } else if (diffHours >= 1) {
+    return diffHours + " " + ("DeviceLinks:tableText.timeAgoUnits." + (diffHours !== 1 ? 'hours' : 'hour'));
+  } else {
+    return diffMins + " " + ("DeviceLinks:tableText.timeAgoUnits." + (diffMins !== 1 ? 'mins' : 'min'));
+  }
+};
+var formatEpochToIST = function formatEpochToIST(epochTime) {
+  var date = new Date(epochTime * 1000);
+  var options = {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+    timeZone: 'Asia/Kolkata'
+  };
+  return new Intl.DateTimeFormat('en-GB', options).format(date);
+};
+var convertEpochToDateString = function convertEpochToDateString(epoch) {
+  if (epoch === 0 || epoch === null) {
+    return undefined;
+  }
+  var date = new Date(epoch * 1000);
+  return date;
+};
+var convertEpochToOnlyDate = function convertEpochToOnlyDate(epoch) {
+  var date = new Date(epoch * 1000);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric'
+  });
+};
+var getSystemTimezoneAbbreviation = function getSystemTimezoneAbbreviation() {
+  var date = new Date();
+  var formatter = new Intl.DateTimeFormat('en-US', {
+    timeZoneName: 'short'
+  });
+  var timeZoneNamePart = formatter.formatToParts(date).find(function (part) {
+    return part.type === 'timeZoneName';
+  });
+  var offset = (timeZoneNamePart === null || timeZoneNamePart === void 0 ? void 0 : timeZoneNamePart.value) || 'GMT';
+  var timezoneMapping = {
+    'UTC': 'UTC',
+    'GMT': 'GMT',
+    'GMT+1': 'CET',
+    'GMT+2': 'EET',
+    'GMT+5:30': 'IST',
+    'GMT+9': 'JST',
+    'GMT-5': 'EST',
+    'GMT-8': 'PST'
+  };
+  return timezoneMapping[offset] || offset;
+};
+var timeStringToSeconds = function timeStringToSeconds(timeString) {
+  var _timeString$split$map = timeString.split(':').map(Number),
+    hours = _timeString$split$map[0],
+    minutes = _timeString$split$map[1],
+    seconds = _timeString$split$map[2];
+  return hours * 3600 + minutes * 60 + seconds;
+};
+
+var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var DatePickerContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var CalendarContainer = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  display: flex;\n  flex-direction: row;\n  background: rgba(245, 248, 250, .95); \n  position: absolute;\n  border: 1px solid ", ";\n  height: auto;\n  width: auto;\n  border-radius: 10px;\n  z-index: 10;\n  padding: 10px;\n  top: 0px;\n  right: 0px;\n  gap: 16px;\n"])), colorVariables.border.medium);
+var Calendar$1 = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose([""])));
+var CalendarTime = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  border: 1px solid ", ";\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 8px;\n"])), colorVariables.border.medium);
+var StartDate = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding-bottom: 4px;\n"])));
+var SelectedStart = styled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  gap: 4px;\n  color: ", ";\n"])), colorVariables.text.medium);
+var CurrentDate = styled.p(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 12px;\n"])));
+var CurrentTime = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  color: ", ";\n"])), colorVariables.text.medium);
+var Selectedtime = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  color: ", ";\n  gap: 8px;\n"])), colorVariables.text.medium);
+var Line = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-top: 10px;\n  padding-bottom: 10px;\n"])));
+var Zones = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CalendarHeader = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n"])));
+var CalendarMonthYear = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  color: ", ";\n  justify-content: center;\n  align-items: center;\n"])), colorVariables.text.medium);
+var CalendarContent = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 5px;\n  padding: 10px;\n"])));
+var Button = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  background:", ";\n  color: ", ";\n  border: none;\n  border-radius: 5px;\n  padding: 5px 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: ", ";\n\n  svg {\n    cursor: pointer;\n  }\n"])), colorVariables["default"].secondary, colorVariables.text.white, function (_ref) {
+  var $size = _ref.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size ? $size + "px" : '30px';
+});
+var CalendarDates = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  cursor: ", "; \n  font-size: 12px;\n  opacity: ", "; \n\n  background-color: ", ";\n\n  color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref3) {
+  var $size = _ref3.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  return $size ? $size + "px" : '30px';
+}, function (_ref5) {
+  var $isFuture = _ref5.$isFuture,
+    $futureDateTime = _ref5.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'default' : 'pointer';
+}, function (_ref6) {
+  var $isFuture = _ref6.$isFuture,
+    $futureDateTime = _ref6.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 0.5 : 1;
+}, function (_ref7) {
+  var $selected = _ref7.$selected,
+    $inRange = _ref7.$inRange;
+  return $selected ? colorVariables["default"].primary : $inRange ? colorVariables["default"].primary : colorVariables["default"].tertiary;
+}, function (_ref8) {
+  var $selected = _ref8.$selected,
+    $inRange = _ref8.$inRange;
+  return $selected ? colorVariables.text.white : $inRange ? colorVariables.text.white : colorVariables.text.medium;
+}, function (_ref9) {
+  var $selected = _ref9.$selected,
+    $inRange = _ref9.$inRange,
+    $isFuture = _ref9.$isFuture,
+    $futureDateTime = _ref9.$futureDateTime;
+  return !$futureDateTime && $isFuture ? 'transparent' : $selected ? colorVariables.disabled.primary : $inRange ? colorVariables.disabled.primary : colorVariables.disabled.primary;
+});
+var Year = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 12px;\n"])));
+var Month = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  font-family: NotoSans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n"])));
+var InputWrapper = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 24px;\n"])));
+var TimeInputWrapper = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n"])));
+var StyledInput = styled.input(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  outline: none;\n  width: 60px;\n  height: 30px;\n  text-align: center;\n  font-size: 16px;\n  border-radius: 5px;\n  background: white;\n  border: 1px solid ", ";\n  color: ", ";\n"])), colorVariables.border.extraBold, colorVariables.text.dark);
+var DatePicker = function DatePicker(_ref10) {
+  var _renderState$startDat3, _renderState$startDat4;
+  var _ref10$dateSize = _ref10.dateSize,
+    dateSize = _ref10$dateSize === void 0 ? 30 : _ref10$dateSize,
+    dateTime = _ref10.dateTime,
+    setDateTime = _ref10.setDateTime,
+    _ref10$futureDateTime = _ref10.futureDateTime,
+    futureDateTime = _ref10$futureDateTime === void 0 ? true : _ref10$futureDateTime;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState({
+      startDate: dateTime.startDate || new Date(new Date().setHours(0, 0, 0, 0) - 86400000),
+      endDate: dateTime.endDate || new Date(new Date().setHours(0, 0, 0, 0))
+    }),
+    renderState = _useState[0],
+    setRenderState = _useState[1];
+  var formatDate1 = function formatDate1(date) {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric'
     });
-  })), text && React.createElement(React.Fragment, null, text));
+  };
+  var handleDateClick = function handleDateClick(day) {
+    var _renderState$startDat;
+    var safeStartDate = (_renderState$startDat = renderState.startDate) != null ? _renderState$startDat : new Date();
+    var clickedDate = new Date(safeStartDate.getFullYear(), safeStartDate.getMonth(), day);
+    setDateTime(function (prev) {
+      var newState;
+      if (!prev.startDate || prev.startDate && prev.endDate) {
+        newState = _extends({}, prev, {
+          startDate: clickedDate,
+          endDate: null
+        });
+      } else if (!prev.endDate && clickedDate >= prev.startDate) {
+        newState = _extends({}, prev, {
+          endDate: clickedDate
+        });
+      } else {
+        newState = _extends({}, prev, {
+          startDate: clickedDate,
+          endDate: null
+        });
+      }
+      return newState;
+    });
+  };
+  var renderCalendar = function renderCalendar(dateSize) {
+    var _renderState$startDat2;
+    var safeCurrentDate = (_renderState$startDat2 = renderState.startDate) != null ? _renderState$startDat2 : new Date();
+    var today = new Date();
+    var daysInMonth = new Date(safeCurrentDate.getFullYear(), safeCurrentDate.getMonth() + 1, 0).getDate();
+    var firstDay = new Date(safeCurrentDate.getFullYear(), safeCurrentDate.getMonth(), 1).getDay();
+    var days = [];
+    var weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    days.push.apply(days, weekDays.map(function (day, index) {
+      return React.createElement(CalendarDates, {
+        key: "weekday-" + index,
+        "$size": dateSize
+      }, day);
+    }));
+    for (var i = 0; i < firstDay; i++) {
+      days.push(React.createElement(CalendarDates, {
+        key: "empty-" + i,
+        "$size": dateSize
+      }));
+    }
+    var _loop = function _loop(day) {
+      var currentDay = new Date(safeCurrentDate.getFullYear(), safeCurrentDate.getMonth(), day);
+      var isFuture = currentDay > today;
+      var isStartSelected = Boolean(dateTime.startDate && currentDay.toDateString() === new Date(dateTime.startDate).toDateString());
+      var isEndSelected = Boolean(dateTime.endDate && currentDay.toDateString() === new Date(dateTime.endDate).toDateString());
+      var inRange = dateTime.startDate && dateTime.endDate ? currentDay > new Date(dateTime.startDate) && currentDay < new Date(dateTime.endDate) : false;
+      days.push(React.createElement(CalendarDates, {
+        key: day,
+        "$selected": isStartSelected || isEndSelected,
+        "$inRange": inRange,
+        "$size": dateSize,
+        "$isFuture": isFuture,
+        "$futureDateTime": futureDateTime,
+        onClick: futureDateTime || !isFuture ? function () {
+          return handleDateClick(day);
+        } : undefined
+      }, day));
+    };
+    for (var day = 1; day <= daysInMonth; day++) {
+      _loop(day);
+    }
+    return days;
+  };
+  var changeHour = function changeHour(value, isStart) {
+    setDateTime(function (prev) {
+      var targetDate = isStart ? prev.startDate : prev.endDate;
+      if (!targetDate) return prev;
+      var newDate = new Date(targetDate || new Date());
+      var newHour = (newDate.getHours() + value) % 24;
+      if (newHour < 0) newHour += 24;
+      newDate.setHours(newHour, newDate.getMinutes(), 0, 0);
+      return isStart ? _extends({}, prev, {
+        startDate: newDate
+      }) : _extends({}, prev, {
+        endDate: newDate
+      });
+    });
+  };
+  var changeMinute = function changeMinute(value, isStart) {
+    setDateTime(function (prev) {
+      var targetDate = isStart ? prev.startDate : prev.endDate;
+      if (!targetDate) return prev;
+      var newDate = new Date(targetDate || new Date());
+      var newMinutes = newDate.getMinutes() + value;
+      var newHours = newDate.getHours();
+      if (newMinutes >= 60) {
+        if (newHours < 23) {
+          newDate.setHours(newHours + 1);
+          newMinutes = 0;
+        } else {
+          return prev;
+        }
+      } else if (newMinutes < 0) {
+        if (newHours > 0) {
+          newDate.setHours(newHours - 1);
+          newMinutes = 59;
+        } else {
+          return prev;
+        }
+      }
+      newDate.setMinutes(newMinutes, 0, 0);
+      return isStart ? _extends({}, prev, {
+        startDate: newDate
+      }) : _extends({}, prev, {
+        endDate: newDate
+      });
+    });
+  };
+  var handleHourChange = function handleHourChange(e, isStart) {
+    var _dateTime$startDate$g, _dateTime$startDate, _dateTime$endDate$get, _dateTime$endDate;
+    if (!dateTime.startDate && !dateTime.endDate) return;
+    var newHour = parseInt(e.target.value, 10);
+    if (isNaN(newHour)) return;
+    var currentHour = isStart ? (_dateTime$startDate$g = (_dateTime$startDate = dateTime.startDate) === null || _dateTime$startDate === void 0 ? void 0 : _dateTime$startDate.getHours()) != null ? _dateTime$startDate$g : 0 : (_dateTime$endDate$get = (_dateTime$endDate = dateTime.endDate) === null || _dateTime$endDate === void 0 ? void 0 : _dateTime$endDate.getHours()) != null ? _dateTime$endDate$get : 0;
+    if (newHour < 0) newHour = 0;
+    if (newHour > 23) newHour = 23;
+    var diff = newHour - currentHour;
+    var now = new Date();
+    var newDate = new Date(isStart ? dateTime.startDate || new Date() : dateTime.endDate || new Date());
+    newDate.setHours(newHour);
+    if (!futureDateTime && newDate > now) {
+      return;
+    }
+    changeHour(diff, isStart);
+  };
+  var handleMinuteChange = function handleMinuteChange(e, isStart) {
+    var _dateTime$startDate$g2, _dateTime$startDate2, _dateTime$endDate$get2, _dateTime$endDate2;
+    if (!dateTime.startDate && !dateTime.endDate) return;
+    var newMinute = parseInt(e.target.value, 10) || 0;
+    var currentMinute = isStart ? (_dateTime$startDate$g2 = (_dateTime$startDate2 = dateTime.startDate) === null || _dateTime$startDate2 === void 0 ? void 0 : _dateTime$startDate2.getMinutes()) != null ? _dateTime$startDate$g2 : 0 : (_dateTime$endDate$get2 = (_dateTime$endDate2 = dateTime.endDate) === null || _dateTime$endDate2 === void 0 ? void 0 : _dateTime$endDate2.getMinutes()) != null ? _dateTime$endDate$get2 : 0;
+    var diff = newMinute - currentMinute;
+    var now = new Date();
+    var newDate = new Date(isStart ? dateTime.startDate || new Date() : dateTime.endDate || new Date());
+    newDate.setMinutes(newMinute);
+    if (!futureDateTime && newDate > now) {
+      return;
+    }
+    changeMinute(diff, isStart);
+  };
+  var formatTime = function formatTime(value) {
+    return value.toString().padStart(2, '0');
+  };
+  return React.createElement(DatePickerContainer, null, React.createElement(CalendarContainer, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, React.createElement(Calendar$1, null, React.createElement(CalendarHeader, null, React.createElement(Button, {
+    "$size": 38,
+    onClick: function onClick() {
+      setRenderState(function (prev) {
+        var _prev$startDate, _prev$startDate2, _prev$startDate3, _prev$startDate4;
+        return _extends({}, prev, {
+          startDate: new Date(((_prev$startDate = prev.startDate) != null ? _prev$startDate : new Date()).getFullYear(), ((_prev$startDate2 = prev.startDate) != null ? _prev$startDate2 : new Date()).getMonth() - 1, 1),
+          endDate: new Date(((_prev$startDate3 = prev.startDate) != null ? _prev$startDate3 : new Date()).getFullYear(), ((_prev$startDate4 = prev.startDate) != null ? _prev$startDate4 : new Date()).getMonth(), 0)
+        });
+      });
+    }
+  }, React.createElement(Icon, {
+    icon: "LeftArrow",
+    color: 'white',
+    size: 12
+  })), React.createElement(CalendarMonthYear, null, React.createElement(Year, null, (_renderState$startDat3 = renderState.startDate) === null || _renderState$startDat3 === void 0 ? void 0 : _renderState$startDat3.getFullYear()), React.createElement(Month, null, (_renderState$startDat4 = renderState.startDate) === null || _renderState$startDat4 === void 0 ? void 0 : _renderState$startDat4.toLocaleDateString('default', {
+    month: 'long'
+  }))), React.createElement(Button, {
+    "$size": 38,
+    onClick: function onClick() {
+      setRenderState(function (prev) {
+        var _prev$startDate5, _prev$startDate6, _prev$startDate7, _prev$startDate8;
+        return _extends({}, prev, {
+          startDate: new Date(((_prev$startDate5 = prev.startDate) != null ? _prev$startDate5 : new Date()).getFullYear(), ((_prev$startDate6 = prev.startDate) != null ? _prev$startDate6 : new Date()).getMonth() + 1, 1),
+          endDate: new Date(((_prev$startDate7 = prev.startDate) != null ? _prev$startDate7 : new Date()).getFullYear(), ((_prev$startDate8 = prev.startDate) != null ? _prev$startDate8 : new Date()).getMonth() + 2, 0)
+        });
+      });
+    }
+  }, React.createElement(Icon, {
+    icon: "RightArrow",
+    color: 'white',
+    size: 12
+  }))), React.createElement(CalendarContent, null, renderCalendar(dateSize))), React.createElement(CalendarTime, null, React.createElement(StartDate, null, React.createElement(SelectedStart, null, React.createElement(CurrentDate, null, t('TimePicker_StartDate')), React.createElement(CurrentTime, null, React.createElement("p", null, dateTime.startDate ? formatDate1(dateTime.startDate) : '-'))), React.createElement(Selectedtime, null, React.createElement(CurrentDate, null, t('TimePicker_StartTime')), React.createElement(InputWrapper, null, React.createElement(TimeInputWrapper, null, React.createElement(StyledInput, {
+    value: dateTime.startDate ? formatTime(dateTime.startDate.getHours()) : '',
+    type: "number",
+    onChange: function onChange(e) {
+      return handleHourChange(e, true);
+    }
+  })), React.createElement(TimeInputWrapper, null, React.createElement(StyledInput, {
+    value: dateTime.startDate ? formatTime(dateTime.startDate.getMinutes()) : '',
+    type: "number",
+    onChange: function onChange(e) {
+      return handleMinuteChange(e, true);
+    }
+  }))))), React.createElement(Line, null, React.createElement("hr", null)), React.createElement(StartDate, null, React.createElement(SelectedStart, null, React.createElement(CurrentDate, null, t('TimePicker_EndDate')), React.createElement(CurrentTime, null, React.createElement("p", null, dateTime.endDate ? formatDate1(dateTime.endDate) : '-'))), React.createElement(Selectedtime, null, React.createElement(CurrentDate, null, t('TimePicker_EndTime')), React.createElement(InputWrapper, null, React.createElement(TimeInputWrapper, null, React.createElement(StyledInput, {
+    value: dateTime.endDate ? formatTime(dateTime.endDate.getHours()) : '',
+    type: "number",
+    onChange: function onChange(e) {
+      return handleHourChange(e, false);
+    }
+  })), React.createElement(TimeInputWrapper, null, React.createElement(StyledInput, {
+    value: dateTime.endDate ? formatTime(dateTime.endDate.getMinutes()) : '',
+    type: "number",
+    onChange: function onChange(e) {
+      return handleMinuteChange(e, false);
+    }
+  }))))), React.createElement(Line, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(CurrentTime, null, t('TimePicker_Zone')), React.createElement(CurrentTime, null, getSystemTimezoneAbbreviation())))));
+};
+
+var _templateObject$8, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
+var OptionContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose([""])));
+var OptionItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  border-bottom: ", ";\n"])), function (_ref) {
+  var $optionBorder = _ref.$optionBorder,
+    $isborder = _ref.$isborder;
+  return $isborder ? $optionBorder || "1px solid " + colorVariables.border.extraLight : '';
+});
+var OptionLabel = styled.label(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans, sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n  color: ", ";\n"])), function (_ref2) {
+  var $optionColor = _ref2.$optionColor;
+  switch ($optionColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $optionColor || colorVariables.text.medium;
+  }
+});
+var SearchContainer = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border-bottom: ", ";\n  border-radius: ", ";\n  padding: 8px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref3) {
+  var $background = _ref3.$background;
+  switch ($background) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["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 = styled.input(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), colorVariables["default"].tertiary, function (_ref6) {
+  var $inputColor = _ref6.$inputColor;
+  switch ($inputColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref7) {
+  var $placeholderColor = _ref7.$placeholderColor;
+  switch ($placeholderColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var Text = styled.span(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  word-break: break-word;\n"])));
+var OptionComponent = function OptionComponent(_ref8) {
+  var options = _ref8.options,
+    selectedOptions = _ref8.selectedOptions,
+    onChange = _ref8.onChange,
+    _ref8$placeholder = _ref8.placeholder,
+    placeholder = _ref8$placeholder === void 0 ? 'Search...' : _ref8$placeholder,
+    placeholderColor = _ref8.placeholderColor,
+    optionBorder = _ref8.optionBorder,
+    optionColor = _ref8.optionColor,
+    searchIcon = _ref8.searchIcon,
+    searchbarTextColor = _ref8.searchbarTextColor,
+    searchBoxBorder = _ref8.searchBoxBorder,
+    searchBoxBorderRadius = _ref8.searchBoxBorderRadius,
+    searchBoxBackground = _ref8.searchBoxBackground,
+    _ref8$searchBox = _ref8.searchBox,
+    searchBox = _ref8$searchBox === void 0 ? true : _ref8$searchBox,
+    NoOptionsText = _ref8.NoOptionsText;
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var handleSearchChange = function handleSearchChange(e) {
+    setSearchQuery(e.target.value);
+  };
+  var handleOptionToggle = function handleOptionToggle(currentOption) {
+    var newOption = selectedOptions.includes(currentOption) ? selectedOptions.filter(function (item) {
+      return item !== currentOption;
+    }) : [].concat(selectedOptions, [currentOption]);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newOption);
+  };
+  var SortedOptions = [].concat(options).sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  }).filter(function (option) {
+    return option.labelText.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  return React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '8px',
+    "$width": '100%'
+  }, searchBox && React.createElement(SearchContainer, {
+    "$borderBottom": searchBoxBorder,
+    "$background": searchBoxBackground,
+    "$borderRadius": searchBoxBorderRadius
+  }, React.createElement(Icon, {
+    icon: 'Search',
+    size: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.size) || 16,
+    color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
+    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px'
+  }), React.createElement(SearchBar, {
+    type: 'text',
+    placeholder: placeholder,
+    value: searchQuery,
+    onChange: handleSearchChange,
+    "$inputColor": searchbarTextColor,
+    "$placeholderColor": placeholderColor
+  })), React.createElement(OptionContainer, null, SortedOptions.length > 0 ? SortedOptions.map(function (option, id) {
+    return React.createElement(OptionItem, {
+      key: option.value,
+      "$optionBorder": optionBorder,
+      "$isborder": id !== SortedOptions.length - 1
+    }, React.createElement(OptionLabel, {
+      htmlFor: option.value,
+      "$optionColor": optionColor
+    }, React.createElement("input", {
+      id: option.value,
+      type: 'checkbox',
+      checked: selectedOptions.includes(option.value),
+      onChange: function onChange() {
+        return handleOptionToggle(option.value);
+      }
+    }), React.createElement(Text, null, option.labelText)));
+  }) : React.createElement(Container, {
+    "$padding": '8px'
+  }, React.createElement(Span, {
+    "$fontSize": '14px'
+  }, NoOptionsText))));
+};
+
+var _templateObject$9, _templateObject2$6, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var DropdownContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  overflow: ", ";\n  padding: ", ";\n  gap: 8px;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  background: ", ";\n  color: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref4) {
+  var $replaceLabel = _ref4.$replaceLabel;
+  return $replaceLabel ? 'auto' : '';
+}, function (_ref5) {
+  var $size = _ref5.$size;
+  switch ($size) {
+    case 'small':
+      return '9px 12px';
+    case 'large':
+      return '24px 12px';
+    default:
+      return '14px 12px';
+  }
+}, function (_ref6) {
+  var $width = _ref6.$width;
+  return $width ? $width : '100%';
+}, function (_ref7) {
+  var $height = _ref7.$height;
+  return $height || '100%';
+}, function (_ref8) {
+  var $border = _ref8.$border,
+    $isOpen = _ref8.$isOpen;
+  return $isOpen ? "1px solid " + colorVariables.text.dark : $border || "1px solid " + colorVariables.border.light;
+}, function (_ref9) {
+  var $borderRadius = _ref9.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref10) {
+  var $disabled = _ref10.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref11) {
+  var $background = _ref11.$background,
+    $disabled = _ref11.$disabled;
+  switch ($background) {
+    case 'dark':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.dark;
+    case 'medium':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.medium;
+    case 'light':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.light;
+    case 'white':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables.text.white;
+    case 'warning':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].warning;
+    case 'info':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].info;
+    case 'success':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].success;
+    case 'error':
+      return $disabled ? colorVariables.disabled.secondary : colorVariables["default"].error;
+    default:
+      return $disabled ? colorVariables.disabled.secondary : $background;
+  }
+}, function (_ref12) {
+  var $color = _ref12.$color;
+  return $color || colorVariables.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 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  width: max-content;\n  position: relative;\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n\n  color: ", ";\n"])), function (_ref15) {
+  var $titleSize = _ref15.$titleSize,
+    $size = _ref15.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref16) {
+  var $titleSize = _ref16.$titleSize,
+    $size = _ref16.$size;
+  return $titleSize ? $titleSize + "px" : $size === 'small' ? '14px' : $size === 'large' ? '18px' : '16px';
+}, function (_ref17) {
+  var $titleColor = _ref17.$titleColor;
+  switch ($titleColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $titleColor;
+  }
+});
+var Container$2 = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n"])));
+var LabelText = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  font-style:", ";\n  color: ", ";\n"])), function (_ref18) {
+  var $labelStyle = _ref18.$labelStyle;
+  return $labelStyle;
+}, colorVariables.text.light);
+var DropdownMenu = styled.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), colorVariables.border.light, function (_ref19) {
+  var $optionsBorderRadius = _ref19.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref20) {
+  var $width = _ref20.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref21) {
+  var $menuBackground = _ref21.$menuBackground;
+  return $menuBackground || colorVariables.accent.extraLight;
+});
+var SelectedOptionsWrapper = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
+var SelectedOptionDiv = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref22) {
+  var $selectedOptionBackground = _ref22.$selectedOptionBackground,
+    $disabled = _ref22.$disabled;
+  switch ($selectedOptionBackground) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return $disabled ? colorVariables.disabled.warning : colorVariables["default"].warning;
+    case 'info':
+      return $disabled ? colorVariables.disabled.info : colorVariables["default"].info;
+    case 'success':
+      return $disabled ? colorVariables.disabled.success : colorVariables["default"].success;
+    case 'error':
+      return $disabled ? colorVariables.disabled.error : colorVariables["default"].error;
+    default:
+      return $selectedOptionBackground || colorVariables.accent.extraLight;
+  }
+}, function (_ref23) {
+  var $selectedOptionColor = _ref23.$selectedOptionColor;
+  switch ($selectedOptionColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $selectedOptionColor;
+  }
+});
+var RemoveIcon = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref24) {
+  var $disabled = _ref24.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref25) {
+  var removeIconBackground = _ref25.removeIconBackground,
+    $type = _ref25.$type;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
+}, function (_ref26) {
+  var $disabled = _ref26.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TextWrapper = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var Asterisk = styled.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables["default"].error);
+var MultiSelectDropdown = function MultiSelectDropdown(_ref27) {
+  var title = _ref27.title,
+    titleSize = _ref27.titleSize,
+    _ref27$titleColor = _ref27.titleColor,
+    titleColor = _ref27$titleColor === void 0 ? colorVariables.text.dark : _ref27$titleColor,
+    _ref27$labelText = _ref27.labelText,
+    labelText = _ref27$labelText === void 0 ? 'Select Cameras' : _ref27$labelText,
+    labelStyle = _ref27.labelStyle,
+    labelColor = _ref27.labelColor,
+    _ref27$replaceLabel = _ref27.replaceLabel,
+    replaceLabel = _ref27$replaceLabel === void 0 ? true : _ref27$replaceLabel,
+    options = _ref27.options,
+    width = _ref27.width,
+    optionWidth = _ref27.optionWidth,
+    height = _ref27.height,
+    placeholder = _ref27.placeholder,
+    border = _ref27.border,
+    _ref27$background = _ref27.background,
+    background = _ref27$background === void 0 ? colorVariables["default"].tertiary : _ref27$background,
+    selectedOptionBackground = _ref27.selectedOptionBackground,
+    selectedOptionColor = _ref27.selectedOptionColor,
+    _ref27$menuBackground = _ref27.menuBackground,
+    menuBackground = _ref27$menuBackground === void 0 ? 'white' : _ref27$menuBackground,
+    optionsBorderRadius = _ref27.optionsBorderRadius,
+    borderRadius = _ref27.borderRadius,
+    removeIconBackground = _ref27.removeIconBackground,
+    handleSelectChange = _ref27.handleSelectChange,
+    selectedOptions = _ref27.selectedOptions,
+    placeholderColor = _ref27.placeholderColor,
+    optionBorder = _ref27.optionBorder,
+    optionColor = _ref27.optionColor,
+    searchIcon = _ref27.searchIcon,
+    searchbarTextColor = _ref27.searchbarTextColor,
+    searchBoxBackground = _ref27.searchBoxBackground,
+    searchBoxBorder = _ref27.searchBoxBorder,
+    searchBoxBorderRadius = _ref27.searchBoxBorderRadius,
+    size = _ref27.size,
+    removeIcon = _ref27.removeIcon,
+    type = _ref27.type,
+    icon = _ref27.icon,
+    _ref27$disabled = _ref27.disabled,
+    disabled = _ref27$disabled === void 0 ? false : _ref27$disabled,
+    _ref27$required = _ref27.required,
+    required = _ref27$required === void 0 ? false : _ref27$required,
+    _ref27$searchBox = _ref27.searchBox,
+    searchBox = _ref27$searchBox === void 0 ? true : _ref27$searchBox,
+    _ref27$NoOptionsText = _ref27.NoOptionsText,
+    NoOptionsText = _ref27$NoOptionsText === void 0 ? 'No Options Available' : _ref27$NoOptionsText;
+  var _useState = useState(false),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var dropdownRef = useRef(null);
+  var toggleDropdown = function toggleDropdown() {
+    if (!disabled) setIsOpen(function (prev) {
+      return !prev;
+    });
+  };
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var selectedOptionObjects = options.filter(function (opt) {
+    return selectedOptions.includes(opt.value);
+  }).sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  });
+  var handleOptionRemoval = function handleOptionRemoval(optionValue) {
+    if (handleSelectChange) {
+      handleSelectChange(selectedOptions.filter(function (value) {
+        return value !== optionValue;
+      }));
+    }
+  };
+  return React.createElement(Container$2, null, title && React.createElement(TitleText, {
+    "$titleColor": titleColor,
+    "$titleSize": titleSize,
+    "$size": size
+  }, title, required && React.createElement(Asterisk, null, "*")), React.createElement(DropdownContainer, {
+    ref: dropdownRef,
+    "$width": width,
+    "$height": height,
+    "$replaceLabel": replaceLabel
+  }, React.createElement(DropdownButton, {
+    onClick: toggleDropdown,
+    "$height": height,
+    "$width": width,
+    "$border": border,
+    "$background": background,
+    "$borderRadius": borderRadius,
+    "$size": size,
+    "$color": labelColor,
+    "$isOpen": isOpen,
+    "$disabled": disabled,
+    "$replaceLabel": replaceLabel
+  }, selectedOptions.length !== 0 && replaceLabel ? React.createElement(SelectedOptionsWrapper, null, selectedOptionObjects.map(function (option) {
+    return React.createElement(SelectedOptionDiv, {
+      key: option.value,
+      "$disabled": disabled,
+      "$selectedOptionBackground": selectedOptionBackground,
+      "$selectedOptionColor": selectedOptionColor
+    }, option.labelText, React.createElement(RemoveIcon, {
+      removeIconBackground: removeIconBackground,
+      "$type": type,
+      "$disabled": disabled,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        if (!disabled) handleOptionRemoval(option.value);
+      }
+    }, React.createElement(Icon, {
+      icon: 'Close',
+      size: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.size) || 6,
+      color: removeIcon !== null && removeIcon !== void 0 && removeIcon.color || type === 'remove' ? colorVariables["default"].error : colorVariables.brand.primary,
+      weight: (removeIcon === null || removeIcon === void 0 ? void 0 : removeIcon.weight) || '0'
+    })));
+  })) : React.createElement(TextWrapper, null, icon && React.createElement(Icon, {
+    icon: icon.name || 'Tag',
+    size: icon.size || 14,
+    weight: icon.weight || '1',
+    color: icon.color || colorVariables.text.medium
+  }), React.createElement(LabelText, {
+    "$labelStyle": labelStyle
+  }, labelText)), React.createElement(Icon, {
+    icon: isOpen ? 'UpArrow' : 'DownArrow',
+    size: 7,
+    weight: '2px',
+    color: colorVariables.text.medium
+  })), isOpen && React.createElement(DropdownMenu, {
+    "$width": optionWidth,
+    "$menuBackground": menuBackground,
+    "$optionsBorderRadius": optionsBorderRadius
+  }, React.createElement(OptionComponent, {
+    options: options,
+    selectedOptions: selectedOptions,
+    onChange: handleSelectChange,
+    placeholder: placeholder,
+    placeholderColor: placeholderColor,
+    optionBorder: optionBorder,
+    optionColor: optionColor,
+    searchIcon: searchIcon,
+    searchbarTextColor: searchbarTextColor,
+    searchBoxBorder: searchBoxBorder || "1px solid " + colorVariables.border.light,
+    searchBoxBorderRadius: searchBoxBorderRadius || '0px',
+    searchBoxBackground: searchBoxBackground,
+    searchBox: searchBox,
+    NoOptionsText: NoOptionsText
+  }))));
+};
+
+var _templateObject$a, _templateObject2$7, _templateObject3$5;
+var SelectedOptionsWrapper$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n"])));
+var SelectedOptionDiv$1 = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  padding: 6px 8px;\n  box-sizing: border-box;\n  gap: 6px;\n  font-family: NotoSans, sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref) {
+  var $selectedOptionBackground = _ref.$selectedOptionBackground,
+    $type = _ref.$type;
+  return $selectedOptionBackground || $type === 'remove' ? colorVariables.disabled.error : colorVariables.accent.softBlue;
+}, function (_ref2) {
+  var $selectedOptionColor = _ref2.$selectedOptionColor,
+    $type = _ref2.$type;
+  return $selectedOptionColor || $type === 'remove' ? colorVariables["default"].error : colorVariables.brand.primary;
+});
+var RemoveIcon$1 = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 50%;\n  box-sizing: border-box;\n  background: ", ";\n"])), function (_ref3) {
+  var $removeIconBackground = _ref3.$removeIconBackground,
+    $type = _ref3.$type;
+  return $removeIconBackground || $type === 'remove' ? '#5E5E5E24' : colorVariables.disabled.primary;
+});
+var SelectedOption = function SelectedOption(_ref4) {
+  var selectedOptions = _ref4.selectedOptions,
+    allOptions = _ref4.allOptions,
+    selectedOptionBackground = _ref4.selectedOptionBackground,
+    selectedOptionColor = _ref4.selectedOptionColor,
+    removeIconBackground = _ref4.removeIconBackground,
+    removeIconColor = _ref4.removeIconColor,
+    onChange = _ref4.onChange,
+    type = _ref4.type;
+  var selectedOptionObjects = allOptions.filter(function (opt) {
+    return selectedOptions.includes(opt.value);
+  }).sort(function (a, b) {
+    return a.labelText.localeCompare(b.labelText);
+  });
+  var handleOptionRemoval = function handleOptionRemoval(optionValue) {
+    if (onChange) {
+      onChange(selectedOptions.filter(function (value) {
+        return value !== optionValue;
+      }));
+    }
+  };
+  return React.createElement(SelectedOptionsWrapper$1, null, selectedOptionObjects.map(function (option) {
+    return React.createElement(SelectedOptionDiv$1, {
+      key: option.value,
+      "$type": type,
+      "$selectedOptionBackground": selectedOptionBackground,
+      "$selectedOptionColor": selectedOptionColor,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleOptionRemoval(option.value);
+      }
+    }, option.labelText, React.createElement(RemoveIcon$1, {
+      "$removeIconBackground": removeIconBackground,
+      "$type": type,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleOptionRemoval(option.value);
+      }
+    }, React.createElement(Icon, {
+      icon: "Close",
+      size: 6,
+      color: removeIconColor || type === 'remove' ? colorVariables["default"].error : colorVariables.brand.primary
+    })));
+  }));
+};
+
+var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2;
+var TitleText$1 = styled.label(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: max-content;\n  font-weight: ", ";\n  ", "\n\n  color: ", ";\n"])), function (_ref) {
+  var $titleWeight = _ref.$titleWeight;
+  return $titleWeight || 500;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          line-height: 12px;\n          ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  switch ($titlecolor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var DropdownContainer$1 = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: ", ";\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  border: ", ";\n  gap: 6px;\n  padding: ", ";\n  background: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref6) {
+  var $width = _ref6.$width;
+  return $width ? $width : '100%';
+}, function (_ref7) {
+  var $selectHeight = _ref7.$selectHeight;
+  return $selectHeight || 'auto';
+}, function (_ref8) {
+  var $borderRadius = _ref8.$borderRadius;
+  return $borderRadius || '8px';
+}, function (_ref9) {
+  var $border = _ref9.$border;
+  return $border || "1px solid " + colorVariables.border.light;
+}, function (_ref10) {
+  var $size = _ref10.$size;
+  switch ($size) {
+    case 'small':
+      return '9px 12px';
+    case 'large':
+      return '24px 12px';
+    default:
+      return '13px 12px';
+  }
+}, function (_ref11) {
+  var $background = _ref11.$background,
+    $disabled = _ref11.$disabled;
+  return $disabled ? colorVariables.border.light : $background || colorVariables.accent.extraLight;
+}, function (_ref12) {
+  var $size = _ref12.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref13) {
+  var $size = _ref13.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+});
+var Options = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 5px 10px;\n  width: 100%;\n  font-size: ", ";\n  font-weight: ", ";\n  background-color: ", ";\n\n  \n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n\n  }\n\n"])), function (_ref14) {
+  var $optionColor = _ref14.$optionColor,
+    $optionSelected = _ref14.$optionSelected;
+  return $optionSelected ? colorVariables.text.white : $optionColor || colorVariables.text.medium;
+}, function (_ref15) {
+  var $optionFontSize = _ref15.$optionFontSize;
+  return $optionFontSize || '14px';
+}, function (_ref16) {
+  var $optionFontWeight = _ref16.$optionFontWeight;
+  return $optionFontWeight || 400;
+}, function (_ref17) {
+  var $optionBackgroundColor = _ref17.$optionBackgroundColor,
+    $optionSelected = _ref17.$optionSelected;
+  return $optionSelected ? colorVariables["default"].primary : $optionBackgroundColor || colorVariables["default"].tertiary;
+}, colorVariables.hover.primary, colorVariables.text.white);
+var LabelText$1 = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  font-style: ", ";\n  color: ", ";\n"])), function (_ref18) {
+  var $size = _ref18.$size;
+  switch ($size) {
+    case 'small':
+      return '14px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref19) {
+  var $size = _ref19.$size;
+  switch ($size) {
+    case 'small':
+      return '12px';
+    case 'large':
+      return '16px';
+    default:
+      return '14px';
+  }
+}, function (_ref20) {
+  var $fontStyle = _ref20.$fontStyle;
+  return $fontStyle || '';
+}, function (_ref21) {
+  var $color = _ref21.$color,
+    $disabled = _ref21.$disabled;
+  return $disabled ? colorVariables.text.medium : $color || colorVariables.text.medium;
+});
+var NoOptions = styled(Span)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: 1px solid ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden; \n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n  \n"])), colorVariables.border.light, function (_ref22) {
+  var $optionsBorderRadius = _ref22.$optionsBorderRadius;
+  return $optionsBorderRadius || '8px';
+}, function (_ref23) {
+  var $width = _ref23.$width;
+  return $width ? $width : 'max-content';
+}, function (_ref24) {
+  var $menuBackground = _ref24.$menuBackground;
+  return $menuBackground || colorVariables.accent.extraLight;
+}, function (_ref25) {
+  var $top = _ref25.$top;
+  return $top && "top: " + $top + ";";
+}, function (_ref26) {
+  var $bottom = _ref26.$bottom;
+  return $bottom && "bottom: " + $bottom + ";";
+});
+var OptionsWrapper = styled.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  max-height: 150px; \n  overflow-y: auto; \n  width: 100%;\n"])));
+var SearchContainer$1 = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  border-bottom: 1px solid ", ";\n  border-radius: ", ";\n  padding: 10px 12px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: sticky;\n  top: 0;\n  z-index: 10; \n"])), function (_ref27) {
+  var $background = _ref27.$background;
+  return $background || colorVariables.accent.extraLight;
+}, function (_ref28) {
+  var $border = _ref28.$border;
+  return $border || 'none';
+}, colorVariables.border.light, function (_ref29) {
+  var $borderRadius = _ref29.$borderRadius;
+  return $borderRadius || '8px 8px 0 0';
+});
+var SearchBar$1 = styled.input(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: transparent;\n  color: ", ";\n  outline: none;\n  \n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n  }\n"])), function (_ref30) {
+  var $inputColor = _ref30.$inputColor;
+  return $inputColor || colorVariables.text.medium;
+}, function (_ref31) {
+  var $placeholderColor = _ref31.$placeholderColor;
+  return $placeholderColor || colorVariables.text.light;
+});
+var SelectOption = function SelectOption(_ref32) {
+  var _options$find;
+  var title = _ref32.title,
+    titlecolor = _ref32.titlecolor,
+    titleWeight = _ref32.titleWeight,
+    options = _ref32.options,
+    value = _ref32.value,
+    onChange = _ref32.onChange,
+    _ref32$disabled = _ref32.disabled,
+    disabled = _ref32$disabled === void 0 ? false : _ref32$disabled,
+    size = _ref32.size,
+    width = _ref32.width,
+    _ref32$labelText = _ref32.labelText,
+    labelText = _ref32$labelText === void 0 ? 'Select' : _ref32$labelText,
+    border = _ref32.border,
+    background = _ref32.background,
+    _ref32$padding = _ref32.padding,
+    padding = _ref32$padding === void 0 ? '0px' : _ref32$padding,
+    borderRadius = _ref32.borderRadius,
+    optionColor = _ref32.optionColor,
+    optionFontSize = _ref32.optionFontSize,
+    optionFontWeight = _ref32.optionFontWeight,
+    optionBackgroundColor = _ref32.optionBackgroundColor,
+    menuBackground = _ref32.menuBackground,
+    optionsBorderRadius = _ref32.optionsBorderRadius,
+    color = _ref32.color,
+    required = _ref32.required,
+    _ref32$NoOptionsText = _ref32.NoOptionsText,
+    NoOptionsText = _ref32$NoOptionsText === void 0 ? 'No Options Available' : _ref32$NoOptionsText,
+    positionRef = _ref32.positionRef,
+    fontStyle = _ref32.fontStyle,
+    icon = _ref32.icon,
+    _ref32$searchBox = _ref32.searchBox,
+    searchBox = _ref32$searchBox === void 0 ? true : _ref32$searchBox,
+    searchBoxBackground = _ref32.searchBoxBackground,
+    searchBoxBorder = _ref32.searchBoxBorder,
+    searchBoxBorderRadius = _ref32.searchBoxBorderRadius,
+    searchIcon = _ref32.searchIcon,
+    _ref32$placeholderTex = _ref32.placeholderText,
+    placeholderText = _ref32$placeholderTex === void 0 ? 'Search...' : _ref32$placeholderTex,
+    _ref32$iconColor = _ref32.iconColor,
+    iconColor = _ref32$iconColor === void 0 ? colorVariables.text.medium : _ref32$iconColor,
+    placeholderColor = _ref32.placeholderColor,
+    inputColor = _ref32.inputColor,
+    _ref32$iconSize = _ref32.iconSize,
+    iconSize = _ref32$iconSize === void 0 ? 16 : _ref32$iconSize,
+    _ref32$allowDeselect = _ref32.allowDeselect,
+    allowDeselect = _ref32$allowDeselect === void 0 ? true : _ref32$allowDeselect;
+  var _useState = useState(false),
+    dropUp = _useState[0],
+    setDropUp = _useState[1];
+  var _useState2 = useState(false),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(''),
+    searchTerm = _useState3[0],
+    setSearchTerm = _useState3[1];
+  var showSearchBox = searchBox && options.length > 5;
+  var toggleDropdown = function toggleDropdown() {
+    var refToUse = (positionRef === null || positionRef === void 0 ? void 0 : positionRef.current) || dropdownRef.current;
+    if (refToUse) {
+      var rect = refToUse.getBoundingClientRect();
+      var windowHeight = window.innerHeight;
+      var spaceBelow = windowHeight - rect.bottom;
+      var spaceAbove = rect.top;
+      var dropdownHeight = 95;
+      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+        setDropUp(true);
+      } else {
+        setDropUp(false);
+      }
+    }
+    setIsOpen(function (prev) {
+      return !prev;
+    });
+    if (!isOpen) {
+      setSearchTerm('');
+    }
+  };
+  var dropdownRef = useRef(null);
+  var searchInputRef = useRef(null);
+  var handleOptionClick = function handleOptionClick(selectedValue) {
+    if (value === selectedValue && allowDeselect) {
+      var Event = {
+        target: {
+          value: '',
+          name: title
+        }
+      };
+      onChange(Event);
+    } else {
+      var _Event = {
+        target: {
+          value: selectedValue,
+          name: title
+        }
+      };
+      onChange(_Event);
+    }
+    setIsOpen(false);
+    setSearchTerm('');
+  };
+  var filteredOptions = searchTerm ? options.filter(function (option) {
+    return option.label.toLowerCase().includes(searchTerm.toLowerCase());
+  }) : options;
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var label = options === null || options === void 0 ? void 0 : (_options$find = options.find(function (option) {
+    return option.value === value;
+  })) === null || _options$find === void 0 ? void 0 : _options$find.label;
+  var handleSearchChange = function handleSearchChange(e) {
+    setSearchTerm(e.target.value);
+  };
+  return React.createElement(Container, {
+    "$padding": padding,
+    "$flexDirection": 'column',
+    "$width": '100%',
+    "$gap": '8px',
+    "$overflow": 'visible'
+  }, title && React.createElement(TitleText$1, {
+    "$size": size,
+    htmlFor: title,
+    "$titlecolor": titlecolor,
+    "$titleWeight": titleWeight
+  }, title, required && React.createElement(Asterisk, null, "*")), React.createElement(DropdownContainer$1, {
+    ref: dropdownRef,
+    "$width": width
+  }, React.createElement(DropdownButton$1, {
+    onClick: function onClick() {
+      if (!disabled) toggleDropdown();
+    },
+    "$width": width,
+    "$border": border,
+    "$background": background,
+    "$borderRadius": borderRadius,
+    "$size": size,
+    "$disabled": disabled
+  }, icon && React.createElement(Icon, {
+    icon: icon.name,
+    size: icon.size || 14,
+    weight: icon.weight || '1px',
+    color: icon.color || colorVariables.text.medium
+  }), label ? React.createElement(LabelText$1, {
+    color: color,
+    "$disabled": disabled,
+    "$size": size
+  }, label) : React.createElement(LabelText$1, {
+    "$fontStyle": fontStyle ? fontStyle : 'italic',
+    color: colorVariables.text.light,
+    "$size": size
+  }, labelText), React.createElement(Icon, {
+    icon: isOpen ? 'UpArrow' : 'DownArrow',
+    size: 7,
+    color: colorVariables.text.medium
+  })), isOpen && React.createElement(DropdownMenu$1, {
+    "$width": width,
+    "$menuBackground": menuBackground,
+    "$optionsBorderRadius": optionsBorderRadius,
+    "$optionsAvailable": options.length > 0,
+    "$top": dropUp ? 'auto' : '126%',
+    "$bottom": dropUp ? '126%' : 'auto'
+  }, showSearchBox && React.createElement(SearchContainer$1, {
+    "$background": searchBoxBackground,
+    "$border": searchBoxBorder,
+    "$borderRadius": searchBoxBorderRadius
+  }, React.createElement(Icon, {
+    icon: "Search",
+    size: iconSize,
+    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px',
+    color: iconColor
+  }), React.createElement(SearchBar$1, {
+    ref: searchInputRef,
+    type: "text",
+    value: searchTerm,
+    onChange: handleSearchChange,
+    placeholder: placeholderText,
+    "$inputColor": inputColor,
+    "$placeholderColor": placeholderColor
+  })), React.createElement(OptionsWrapper, null, filteredOptions.length ? filteredOptions.map(function (option) {
+    return React.createElement(Options, {
+      key: option.value,
+      "$optionColor": optionColor,
+      "$optionFontSize": optionFontSize || '14px',
+      "$optionFontWeight": optionFontWeight,
+      "$optionBackgroundColor": optionBackgroundColor,
+      onClick: function onClick() {
+        return handleOptionClick(option.value);
+      },
+      "$optionSelected": option.value === value
+    }, option.label);
+  }) : React.createElement(NoOptions, null, NoOptionsText)))));
 };
 
 var useClickOutside = function useClickOutside(elRef, elCallback) {
@@ -3204,9 +4761,9 @@ var useClickOutside = function useClickOutside(elRef, elCallback) {
   }, [elCallback, elRef]);
 };
 
-var _templateObject$5, _templateObject2$4;
-var ModalOverlay = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables.accent.light, function (_ref) {
+var _templateObject$c, _templateObject2$9;
+var ModalOverlay = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  max-width: ", ";\n"])), colorVariables.accent.light, function (_ref) {
   var maxWidth = _ref.maxWidth;
   return maxWidth ? maxWidth : '400px';
 });
@@ -3239,5 +4796,1351 @@ var useCustomModal = function useCustomModal(_ref3) {
   };
 };
 
-export { ButtonComponent as Button, CircularLoader, Icon, MultiFunctionInputComponent as Input, ProgressBar, Tabs, colorVariables, darkColorVariables, themes, useClickOutside, useCustomModal };
+var useNotification = function useNotification() {
+  var sendNotification = function sendNotification(_ref) {
+    var type = _ref.type,
+      message = _ref.message,
+      promiseConfig = _ref.promiseConfig,
+      customStyle = _ref.customStyle,
+      _ref$clearCurrent = _ref.clearCurrent,
+      clearCurrent = _ref$clearCurrent === void 0 ? false : _ref$clearCurrent;
+    if (clearCurrent) {
+      toast.dismiss();
+    }
+    switch (type) {
+      case 'success':
+        toast.success(message);
+        break;
+      case 'error':
+        toast.error(message);
+        break;
+      case 'info':
+        toast(message, {
+          icon: React.createElement(Container, {
+            "$height": '20px',
+            "$width": '20px',
+            "$alignItems": 'center',
+            "$justifyContent": 'center',
+            "$borderRadius": '100%',
+            "$background": colorVariables["default"].info
+          }, React.createElement(Icon, {
+            icon: "Information",
+            weight: '0px',
+            size: 14,
+            color: colorVariables.text.white
+          })),
+          style: {
+            borderRadius: '8px',
+            background: colorVariables.text.white,
+            color: '#363636'
+          }
+        });
+        break;
+      case 'promise':
+        if (promiseConfig) {
+          toast.promise(promiseConfig.promise, {
+            loading: promiseConfig.loading,
+            success: promiseConfig.success,
+            error: promiseConfig.error
+          }, {
+            style: {
+              minWidth: '300px'
+            }
+          });
+        }
+        break;
+      case 'custom':
+        toast(message, {
+          icon: React.createElement(Icon, {
+            icon: (customStyle === null || customStyle === void 0 ? void 0 : customStyle.icon) || 'Add',
+            size: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconSize,
+            weight: customStyle === null || customStyle === void 0 ? void 0 : customStyle.iconWeight
+          }),
+          style: {
+            background: customStyle === null || customStyle === void 0 ? void 0 : customStyle.background,
+            color: customStyle === null || customStyle === void 0 ? void 0 : customStyle.color
+          }
+        });
+        break;
+      default:
+        console.error('Invalid notification type or missing configuration!');
+    }
+  };
+  return {
+    sendNotification: sendNotification
+  };
+};
+
+var _templateObject$d, _templateObject2$a;
+var SearchContainer$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 5.5px 8px;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])), function (_ref) {
+  var $background = _ref.$background;
+  return $background || colorVariables["default"].tertiary;
+}, function (_ref2) {
+  var $border = _ref2.$border;
+  return $border || 'none';
+}, function (_ref3) {
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$2 = styled.input(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-style: normal;\n  font-size: 14px;\n  line-height: normal;\n  background: ", ";\n  color: ", ";\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    position: absolute;\n    top: 1px;\n  }\n"])), colorVariables["default"].tertiary, function (_ref4) {
+  var $inputColor = _ref4.$inputColor;
+  return $inputColor || colorVariables.text.medium;
+}, function (_ref5) {
+  var $placeholderColor = _ref5.$placeholderColor;
+  return $placeholderColor || colorVariables.text.light;
+});
+var SearchBox = function SearchBox(_ref6) {
+  var value = _ref6.value,
+    onChange = _ref6.onChange,
+    _ref6$placeholder = _ref6.placeholder,
+    placeholder = _ref6$placeholder === void 0 ? 'Search...' : _ref6$placeholder,
+    border = _ref6.border,
+    borderRadius = _ref6.borderRadius,
+    _ref6$iconColor = _ref6.iconColor,
+    iconColor = _ref6$iconColor === void 0 ? colorVariables.text.medium : _ref6$iconColor,
+    placeholderColor = _ref6.placeholderColor,
+    inputColor = _ref6.inputColor,
+    _ref6$iconSize = _ref6.iconSize,
+    iconSize = _ref6$iconSize === void 0 ? 16 : _ref6$iconSize,
+    background = _ref6.background;
+  return React.createElement(SearchContainer$2, {
+    "$border": border,
+    "$background": background,
+    "$borderRadius": borderRadius
+  }, React.createElement(Icon, {
+    icon: "Search",
+    size: iconSize,
+    color: iconColor,
+    weight: "0px"
+  }), React.createElement(SearchBar$2, {
+    type: "text",
+    placeholder: placeholder,
+    value: value,
+    onChange: onChange,
+    "$inputColor": inputColor,
+    "$placeholderColor": placeholderColor
+  }));
+};
+
+var _templateObject$e, _templateObject2$b, _templateObject3$7, _templateObject4$5, _templateObject5$5, _templateObject6$5;
+var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label = styled.label(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  width: 100%;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          line-height: 12px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          line-height: 16px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          line-height: 14px;\n        ";
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  switch ($titlecolor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $titlecolor;
+  }
+});
+var Input = styled.input(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n\n  ", "\n\n  &:focus {\n    border: 1px solid\n      ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, function (_ref7) {
+  var $size = _ref7.$size;
+  switch ($size) {
+    case 'small':
+      return "\n          font-size: 12px;\n          padding: 5px 10px;\n        ";
+    case 'medium':
+      return "\n          font-size: 14px;\n          padding: 9.5px 12px;\n        ";
+    case 'large':
+      return "\n          font-size: 16px;\n          padding: 9px 14px;\n        ";
+    default:
+      return "\n          font-size: 14px;\n          padding: 7px 12px;\n        ";
+  }
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  switch ($color) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $color;
+  }
+}, colorVariables.text.light);
+var InputWrapper$1 = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n"])));
+var IconWrapper$1 = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 12px;\n  cursor: pointer;\n\n  > div {\n    cursor: ", ";\n  }\n"])), function (_ref9) {
+  var $disabled = _ref9.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var Asterisk$1 = styled.span(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), colorVariables["default"].error);
+var InputField = function InputField(_ref10) {
+  var _ref10$type = _ref10.type,
+    type = _ref10$type === void 0 ? 'text' : _ref10$type,
+    title = _ref10.title,
+    placeholder = _ref10.placeholder,
+    _ref10$disabled = _ref10.disabled,
+    disabled = _ref10$disabled === void 0 ? false : _ref10$disabled,
+    inputValue = _ref10.inputValue,
+    onChange = _ref10.onChange,
+    _ref10$size = _ref10.size,
+    size = _ref10$size === void 0 ? 'medium' : _ref10$size,
+    _ref10$color = _ref10.color,
+    color = _ref10$color === void 0 ? colorVariables.text.dark : _ref10$color,
+    _ref10$padding = _ref10.padding,
+    padding = _ref10$padding === void 0 ? '0px' : _ref10$padding,
+    _ref10$titlecolor = _ref10.titlecolor,
+    titlecolor = _ref10$titlecolor === void 0 ? colorVariables.text.dark : _ref10$titlecolor,
+    icon = _ref10.icon,
+    _ref10$iconsize = _ref10.iconsize,
+    iconsize = _ref10$iconsize === void 0 ? 18 : _ref10$iconsize,
+    iconweight = _ref10.iconweight,
+    iconcolor = _ref10.iconcolor,
+    _ref10$required = _ref10.required,
+    required = _ref10$required === void 0 ? false : _ref10$required,
+    _ref10$background = _ref10.background,
+    background = _ref10$background === void 0 ? colorVariables["default"].tertiary : _ref10$background,
+    onEnter = _ref10.onEnter;
+  var _useState = useState(disabled),
+    isDisabled = _useState[0],
+    setIsDisabled = _useState[1];
+  var _useState2 = useState(type),
+    inputType = _useState2[0],
+    setInputType = _useState2[1];
+  var handleToggleDisabled = function handleToggleDisabled() {
+    setIsDisabled(function (prev) {
+      return !prev;
+    });
+  };
+  var handleShowPassword = function handleShowPassword() {
+    setInputType(function (prevType) {
+      return prevType === 'password' ? 'text' : 'password';
+    });
+  };
+  useEffect(function () {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  return React.createElement(Container$3, {
+    "$padding": padding
+  }, title && React.createElement(Label, {
+    "$size": size,
+    htmlFor: title,
+    "$titlecolor": titlecolor
+  }, title, required && React.createElement(Asterisk$1, null, "*")), React.createElement(InputWrapper$1, null, React.createElement(Input, {
+    type: inputType || 'text',
+    name: title,
+    id: title,
+    value: inputValue,
+    placeholder: placeholder,
+    disabled: isDisabled,
+    onChange: onChange,
+    "$size": size,
+    "$color": color,
+    "$background": background,
+    readOnly: onChange === undefined ? true : false,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') {
+        if (onEnter) onEnter();
+      }
+    }
+  }), type === 'password' && inputValue && React.createElement(IconWrapper$1, {
+    "$disabled": disabled,
+    onClick: function onClick() {
+      if (!disabled) handleShowPassword();
+    }
+  }, React.createElement(Icon, {
+    icon: inputType === 'password' ? 'CloseEye' : 'OpenEye',
+    size: iconsize,
+    weight: iconweight,
+    color: iconcolor || colorVariables["default"].primary
+  })), icon && type !== 'password' && React.createElement(IconWrapper$1, {
+    onClick: handleToggleDisabled
+  }, React.createElement(Icon, {
+    icon: icon,
+    size: iconsize,
+    weight: iconweight,
+    color: iconcolor || colorVariables["default"].primary
+  }))));
+};
+
+var _templateObject$f, _templateObject2$c, _templateObject3$8;
+var Container$4 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 8px;\n  padding: ", ";\n"])), function (_ref) {
+  var $padding = _ref.$padding;
+  return $padding;
+});
+var Label$1 = styled.label(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n  cursor: auto;\n  font-weight: 500;\n  position: relative;\n  width: max-content;\n\n  ", "\n\n  color: ", ";\n"])), function (_ref2) {
+  var $size = _ref2.$size;
+  switch ($size) {
+    case 'small':
+      return 'font-size: 12px; line-height: 12px;';
+    case 'medium':
+      return 'font-size: 14px; line-height: 14px;';
+    case 'large':
+      return 'font-size: 16px; line-height: 16px;';
+    default:
+      return 'font-size: 14px; line-height: 14px;';
+  }
+}, function (_ref3) {
+  var $titlecolor = _ref3.$titlecolor;
+  return $titlecolor || colorVariables.text.dark;
+});
+var TextAreaComponent = styled.textarea(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  cursor: ", ";\n  background: ", ";\n  transition: all 0.3s ease;\n  color: ", ";\n  resize: none;\n  height: 100%;\n  \n  ", "\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n    font-style: italic;\n    font-family: NotoSans, sans-serif;\n  }\n"])), colorVariables.border.light, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled ? 'not-allowed' : 'auto';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled,
+    $background = _ref5.$background;
+  return $disabled ? colorVariables.disabled.secondary : $background;
+}, function (_ref6) {
+  var $color = _ref6.$color;
+  return $color;
+}, function (_ref7) {
+  var $size = _ref7.$size;
+  switch ($size) {
+    case 'small':
+      return 'font-size: 12px; padding: 5px 10px;';
+    case 'medium':
+      return 'font-size: 14px; padding: 9px 12px;';
+    case 'large':
+      return 'font-size: 16px; padding: 9px 14px;';
+    default:
+      return 'font-size: 14px; padding: 7px 12px;';
+  }
+}, function (_ref8) {
+  var $color = _ref8.$color;
+  return $color || colorVariables.text.dark;
+}, colorVariables.text.light);
+var TextArea = function TextArea(_ref9) {
+  var title = _ref9.title,
+    placeholder = _ref9.placeholder,
+    _ref9$disabled = _ref9.disabled,
+    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
+    inputValue = _ref9.inputValue,
+    onChange = _ref9.onChange,
+    _ref9$size = _ref9.size,
+    size = _ref9$size === void 0 ? 'medium' : _ref9$size,
+    _ref9$color = _ref9.color,
+    color = _ref9$color === void 0 ? colorVariables.text.dark : _ref9$color,
+    _ref9$padding = _ref9.padding,
+    padding = _ref9$padding === void 0 ? '0px' : _ref9$padding,
+    _ref9$titlecolor = _ref9.titlecolor,
+    titlecolor = _ref9$titlecolor === void 0 ? colorVariables.text.dark : _ref9$titlecolor,
+    _ref9$required = _ref9.required,
+    required = _ref9$required === void 0 ? false : _ref9$required,
+    _ref9$background = _ref9.background,
+    background = _ref9$background === void 0 ? colorVariables["default"].tertiary : _ref9$background;
+  var _useState = useState(disabled),
+    isDisabled = _useState[0],
+    setIsDisabled = _useState[1];
+  useEffect(function () {
+    setIsDisabled(disabled);
+  }, [disabled]);
+  return React.createElement(Container$4, {
+    "$padding": padding
+  }, title && React.createElement(Label$1, {
+    "$size": size,
+    htmlFor: title,
+    "$titlecolor": titlecolor
+  }, title, required && React.createElement(Asterisk$1, null, "*")), React.createElement(TextAreaComponent, {
+    name: title,
+    id: title,
+    value: inputValue,
+    placeholder: placeholder,
+    disabled: isDisabled,
+    onChange: onChange,
+    "$size": size,
+    "$color": color,
+    "$background": background
+  }));
+};
+
+var _templateObject$g, _templateObject2$d, _templateObject3$9, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$3;
+var OptionContainer$1 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n  z-index: 2;\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  padding: 4px;\n  top: 40px;\n  left: 0px;\n  background: ", ";\n  max-width: 192px;\n  min-width: 192px;\n  height: auto;\n  max-height: 175px;\n"])), colorVariables.text.white);
+var OptionItem$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-radius: 8px;\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), function (_ref) {
+  var $optionSelected = _ref.$optionSelected;
+  return $optionSelected ? colorVariables.text.white : colorVariables.text.medium;
+}, function (_ref2) {
+  var $optionSelected = _ref2.$optionSelected;
+  return $optionSelected ? colorVariables["default"].primary : colorVariables.text.white;
+}, colorVariables.hover.primary, colorVariables.text.white);
+var TotalOptionsHeader = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  z-index: 2;\n  background: ", ";\n  color: ", ";\n  height: max-content;\n  padding: 8px 4px;\n  gap: 4px;\n  border-bottom: 1px solid ", ";\n  font-size:12px;\n"])), colorVariables.text.white, colorVariables.text.light, colorVariables.text.light);
+var OptionLabel$1 = styled.label(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  height: max-content;\n  gap: 8px;\n  padding: 8px 12px;\n  word-break: break-word;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-family: NotoSans;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 14px;\n"])));
+var SearchContainer$3 = styled.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: auto;\n  background: ", ";\n  border: ", ";\n  border-radius: ", ";\n  padding: 6.5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n"])), function (_ref3) {
+  var $background = _ref3.$background;
+  switch ($background) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $background;
+  }
+}, function (_ref4) {
+  var $borderBottom = _ref4.$borderBottom;
+  return $borderBottom || 'none';
+}, function (_ref5) {
+  var $borderRadius = _ref5.$borderRadius;
+  return $borderRadius || '8px';
+});
+var SearchBar$3 = styled.input(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: 100%;\n  font-family: NotoSans, sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 100%;\n  background: ", ";\n  color: ", ";\n\n  &::placeholder {\n    color: ", ";\n  font-style: italic;\n  font-size: 14px;\n  }\n"])), colorVariables["default"].tertiary, function (_ref6) {
+  var $inputColor = _ref6.$inputColor;
+  switch ($inputColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $inputColor;
+  }
+}, function (_ref7) {
+  var $placeholderColor = _ref7.$placeholderColor;
+  switch ($placeholderColor) {
+    case 'dark':
+      return colorVariables.text.dark;
+    case 'medium':
+      return colorVariables.text.medium;
+    case 'light':
+      return colorVariables.text.light;
+    case 'white':
+      return colorVariables.text.white;
+    case 'warning':
+      return colorVariables["default"].warning;
+    case 'info':
+      return colorVariables["default"].info;
+    case 'success':
+      return colorVariables["default"].success;
+    case 'error':
+      return colorVariables["default"].error;
+    default:
+      return $placeholderColor;
+  }
+});
+var OptionsWrapper$1 = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  padding: 4px 0px;\n  height: 100%;\n  overflow-y: auto;\n  scrollbar-width: thin;\n  background: ", "\n"])), colorVariables.text.white);
+var TextFieldWithDropdown = function TextFieldWithDropdown(_ref8) {
+  var options = _ref8.options,
+    selectedOption = _ref8.selectedOption,
+    onSelect = _ref8.onSelect,
+    searchQuery = _ref8.searchQuery,
+    setSearchQuery = _ref8.setSearchQuery,
+    internalSearchQuery = _ref8.internalSearchQuery,
+    setInternalSearchQuery = _ref8.setInternalSearchQuery,
+    _ref8$placeholder = _ref8.placeholder,
+    placeholder = _ref8$placeholder === void 0 ? 'Search...' : _ref8$placeholder,
+    searchIcon = _ref8.searchIcon,
+    _ref8$searchbarTextCo = _ref8.searchbarTextColor,
+    searchbarTextColor = _ref8$searchbarTextCo === void 0 ? 'medium' : _ref8$searchbarTextCo,
+    searchBoxBorder = _ref8.searchBoxBorder,
+    _ref8$searchBoxBorder = _ref8.searchBoxBorderRadius,
+    searchBoxBorderRadius = _ref8$searchBoxBorder === void 0 ? '6px' : _ref8$searchBoxBorder,
+    _ref8$searchBox = _ref8.searchBox,
+    searchBox = _ref8$searchBox === void 0 ? true : _ref8$searchBox,
+    NoOptionsText = _ref8.NoOptionsText;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var searchBoxRef = useRef(null);
+  var _useState = useState(false),
+    isSearchBarEnabled = _useState[0],
+    setIsSearchBarEnabled = _useState[1];
+  var filteredArray = options.filter(function (item) {
+    return item.labelText.toLowerCase().includes(internalSearchQuery.toLowerCase().trim());
+  });
+  var handleSearchChange = function handleSearchChange(e) {
+    var value = e.target.value.trimStart();
+    setInternalSearchQuery(value);
+  };
+  var handleClickOutside = function handleClickOutside(event) {
+    if (searchBoxRef.current && !searchBoxRef.current.contains(event.target)) {
+      setIsSearchBarEnabled(false);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  return React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '8px',
+    "$width": '100%',
+    "$position": 'relative'
+  }, searchBox && React.createElement(SearchContainer$3, {
+    "$borderBottom": searchBoxBorder,
+    "$background": isSearchBarEnabled ? colorVariables.text.white : colorVariables.accent.light,
+    "$borderRadius": searchBoxBorderRadius,
+    ref: searchBoxRef
+  }, React.createElement(Container, {
+    "$minWidth": '14px'
+  }, React.createElement(Icon, {
+    icon: 'Search',
+    size: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.size) || 14,
+    color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
+    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px'
+  })), React.createElement(Container, {
+    onClick: function onClick() {
+      return setIsSearchBarEnabled(true);
+    }
+  }, React.createElement(SearchBar$3, {
+    type: 'text',
+    placeholder: placeholder,
+    value: internalSearchQuery,
+    onChange: handleSearchChange,
+    "$inputColor": searchbarTextColor,
+    "$placeholderColor": isSearchBarEnabled ? colorVariables.text.light : colorVariables.text.medium,
+    disabled: !!searchQuery
+  })), (internalSearchQuery || searchQuery) && React.createElement(Icon, {
+    icon: 'Close',
+    size: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.size) || 10,
+    color: searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.color,
+    weight: (searchIcon === null || searchIcon === void 0 ? void 0 : searchIcon.weight) || '0px',
+    onClick: function onClick() {
+      setInternalSearchQuery('');
+      setSearchQuery('');
+    }
+  }), isSearchBarEnabled && React.createElement(OptionContainer$1, null, options.length > 0 ? React.createElement(Container, {
+    "$flexDirection": 'column'
+  }, React.createElement(TotalOptionsHeader, null, React.createElement(Span, {
+    "$fontSize": '12px',
+    "$fontWeight": '400',
+    "$color": colorVariables.text.light
+  }, t('Showing_results') + " (" + filteredArray.length + " of " + (options === null || options === void 0 ? void 0 : options.length) + ")")), React.createElement(OptionsWrapper$1, null, filteredArray.length > 0 ? filteredArray.map(function (option) {
+    return React.createElement(OptionItem$1, {
+      key: option.value,
+      "$optionSelected": option.value === selectedOption
+    }, React.createElement(OptionLabel$1, {
+      htmlFor: option.value,
+      onClick: function onClick() {
+        setInternalSearchQuery(option.labelText);
+        setSearchQuery(option.labelText);
+        setIsSearchBarEnabled(false);
+        if (onSelect) onSelect(option);
+      }
+    }, option.labelText));
+  }) : React.createElement(Container, {
+    "$justifyContent": 'center',
+    "$padding": '4px'
+  }, React.createElement(Span, {
+    "$fontSize": '12px',
+    "$lineHeight": 'normal'
+  }, NoOptionsText)))) : React.createElement(Container, {
+    "$padding": '8px'
+  }, React.createElement(Span, {
+    "$fontSize": '14px'
+  }, NoOptionsText)))));
+};
+
+var _templateObject$h, _templateObject2$e, _templateObject3$a, _templateObject4$7;
+var spin$1 = keyframes(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n  0% { opacity: 1; }\n  100% { opacity: 0.3; }\n"])));
+var getDotPosition = function getDotPosition(index, size) {
+  var angle = index * 360 / 8;
+  var radius = size / 2.5;
+  var x = radius * Math.cos(angle * Math.PI / 180);
+  var y = radius * Math.sin(angle * Math.PI / 180);
+  return "translate(" + x + "px, " + y + "px)";
+};
+var SpinnerContainer = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref) {
+  var $size = _ref.$size;
+  return $size;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size;
+});
+var Dot = styled.div.attrs(function (_ref3) {
+  var $index = _ref3.$index,
+    $size = _ref3.$size;
+  return {
+    style: {
+      transform: getDotPosition($index, $size)
+    }
+  };
+})(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\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, function (_ref7) {
+  var $speed = _ref7.$speed;
+  return $speed;
+}, function (_ref8) {
+  var $index = _ref8.$index,
+    $speed = _ref8.$speed;
+  return $index * $speed / 8;
+});
+var SpinnerWrapper = styled.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: max-content;\n"])));
+var sizeMap = {
+  small: {
+    size: 32
+  },
+  medium: {
+    size: 48
+  },
+  large: {
+    size: 64
+  }
+};
+var CircularLoader = function CircularLoader(_ref9) {
+  var _ref9$size = _ref9.size,
+    size = _ref9$size === void 0 ? 'medium' : _ref9$size,
+    _ref9$color = _ref9.color,
+    color = _ref9$color === void 0 ? 'black' : _ref9$color,
+    _ref9$dotSize = _ref9.dotSize,
+    dotSize = _ref9$dotSize === void 0 ? 8 : _ref9$dotSize,
+    _ref9$speed = _ref9.speed,
+    speed = _ref9$speed === void 0 ? 1.2 : _ref9$speed,
+    text = _ref9.text,
+    customSize = _ref9.customSize;
+  var spinnerSize = customSize != null ? customSize : sizeMap[size].size;
+  return React.createElement(SpinnerWrapper, null, React.createElement(SpinnerContainer, {
+    "$size": spinnerSize,
+    "aria-label": "Loading animation"
+  }, Array.from({
+    length: 8
+  }).map(function (_, i) {
+    return React.createElement(Dot, {
+      key: i,
+      "$index": i,
+      "$size": spinnerSize,
+      "$dotSize": dotSize,
+      "$color": color,
+      "$speed": speed
+    });
+  })), text && React.createElement(React.Fragment, null, text));
+};
+
+var _templateObject$i, _templateObject2$f;
+var spin$2 = keyframes(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Spinner$1 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  width: ", "px;\n  height: ", "px;\n  border: 5px solid #ddd;\n  border-top-color: ", ";\n  border-radius: 50%;\n  animation: ", " 1s linear infinite;\n"])), function (_ref) {
+  var $size = _ref.$size;
+  return $size;
+}, function (_ref2) {
+  var $size = _ref2.$size;
+  return $size;
+}, function (_ref3) {
+  var $color = _ref3.$color;
+  return $color;
+}, spin$2);
+var Loader = function Loader(_ref4) {
+  var title = _ref4.title,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 32 : _ref4$size,
+    _ref4$color = _ref4.color,
+    color = _ref4$color === void 0 ? colorVariables["default"].primary : _ref4$color,
+    titleColor = _ref4.titleColor,
+    titleSize = _ref4.titleSize;
+  return React.createElement(Container, {
+    "$alignItems": 'center',
+    "$justifyContent": 'center',
+    "$width": '100%',
+    "$height": '100%',
+    "$flexDirection": 'column',
+    "$gap": '12px'
+  }, React.createElement(Container, null, React.createElement(Spinner$1, {
+    "$size": size,
+    "$color": color
+  })), title && React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$gap": '12px'
+  }, React.createElement(Container, {
+    "$alignItems": 'center',
+    "$justifyContent": 'center'
+  }, React.createElement(Span, {
+    "$fontWeight": '400',
+    "$color": titleColor,
+    "$fontSize": titleSize
+  }, title))));
+};
+
+var _templateObject$j;
+var PageInput = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  padding: 4px;\n  color: ", ";\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), colorVariables.accent.extraLight, colorVariables.border.light, colorVariables.text.dark);
+var Pagination = function Pagination(_ref) {
+  var totalPages = _ref.totalPages,
+    currentPage = _ref.currentPage,
+    itemsPerPage = _ref.itemsPerPage,
+    onPageChange = _ref.onPageChange,
+    onItemsPerPageChange = _ref.onItemsPerPageChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useNotification = useNotification(),
+    sendNotification = _useNotification.sendNotification;
+  var _useState = useState(currentPage.toString()),
+    inputPage = _useState[0],
+    setInputPage = _useState[1];
+  React.useEffect(function () {
+    setInputPage(currentPage.toString());
+  }, [currentPage]);
+  var handlePageChange = function handlePageChange(page) {
+    if (page < 1 || page > totalPages) return;
+    onPageChange(page);
+  };
+  var handleInputChange = function handleInputChange(e) {
+    var value = e.target.value;
+    if (/^(?:[1-9][0-9]*|0)?$/.test(value)) {
+      setInputPage(value);
+    }
+  };
+  var handleGoClick = function handleGoClick() {
+    var page = Math.floor(Number(inputPage));
+    if (!isNaN(page) && page >= 1 && page <= totalPages) {
+      handlePageChange(page);
+    } else {
+      setInputPage(currentPage.toString());
+      sendNotification({
+        type: 'error',
+        message: 'Invalid page number'
+      });
+    }
+  };
+  var containerRef = useRef(null);
+  return React.createElement(Container, {
+    "$gap": '40px',
+    "$height": '100%',
+    "$alignItems": 'flex-start',
+    ref: containerRef
+  }, React.createElement(Container, {
+    "$gap": '16px',
+    "$alignItems": 'center'
+  }, React.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px',
+    "$lineHeight": '100%'
+  }, t('Page')), React.createElement(Container, {
+    "$gap": '12px',
+    "$alignItems": 'center'
+  }, React.createElement(Container, {
+    "$gap": '4px',
+    "$alignItems": 'center'
+  }, React.createElement(PageInput, {
+    type: 'number',
+    value: inputPage,
+    onChange: handleInputChange,
+    min: 1,
+    max: totalPages,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') handleGoClick();
+    }
+  }), React.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px'
+  }, "/ ", totalPages)), React.createElement(ButtonComponent, {
+    variant: 'primary',
+    disabled: inputPage.trim() === '' || isNaN(Number(inputPage)),
+    onClick: handleGoClick,
+    text: t('Go'),
+    size: 'small'
+  })), React.createElement(Container, {
+    "$gap": '12px'
+  }, React.createElement(ButtonComponent, {
+    onClick: function onClick() {
+      return handlePageChange(currentPage - 1);
+    },
+    disabled: currentPage === 1,
+    icon: 'LeftArrow',
+    iconSize: 12,
+    size: 'custom',
+    padding: '7px',
+    variant: 'secondary',
+    borderRadius: '4px',
+    color: colorVariables.text.white
+  }), React.createElement(ButtonComponent, {
+    onClick: function onClick() {
+      return handlePageChange(currentPage + 1);
+    },
+    disabled: currentPage === totalPages,
+    icon: 'RightArrow',
+    iconSize: 12,
+    size: 'custom',
+    padding: '7px',
+    variant: 'secondary',
+    borderRadius: '4px',
+    color: colorVariables.text.white
+  }))), React.createElement(Container, {
+    "$gap": '16px',
+    "$justifyContent": 'center',
+    "$alignItems": 'center'
+  }, React.createElement(Span, {
+    "$fontWeight": '400',
+    "$fontSize": '14px'
+  }, t('Item_Per_Page')), React.createElement(Container, null, React.createElement(SelectOption, {
+    width: '54px',
+    size: 'small',
+    value: itemsPerPage.toString(),
+    onChange: function onChange(e) {
+      var val = parseInt(e.target.value, 10);
+      if (!isNaN(val)) {
+        onItemsPerPageChange(val);
+      }
+    },
+    options: [{
+      label: '5',
+      value: '5'
+    }, {
+      label: '10',
+      value: '10'
+    }, {
+      label: '20',
+      value: '20'
+    }],
+    positionRef: containerRef,
+    allowDeselect: false
+  }))));
+};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var _ref$totalSteps = _ref.totalSteps,
+    totalSteps = _ref$totalSteps === void 0 ? 4 : _ref$totalSteps;
+  var _useState = useState(0),
+    currentStep = _useState[0],
+    setCurrentStep = _useState[1];
+  useEffect(function () {
+    var interval = setInterval(function () {
+      setCurrentStep(function (prevStep) {
+        if (prevStep < totalSteps) {
+          return prevStep + 1;
+        } else {
+          clearInterval(interval);
+          return totalSteps;
+        }
+      });
+    }, 1000);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [totalSteps]);
+  return React.createElement("div", {
+    style: {
+      width: '100%',
+      textAlign: 'center'
+    }
+  }, React.createElement("p", {
+    style: {
+      fontSize: '14px',
+      fontWeight: '400',
+      marginBottom: '8px',
+      color: '#4C9EEB'
+    }
+  }, "Step ", currentStep, " out of ", totalSteps), React.createElement("div", {
+    style: {
+      width: '100%',
+      backgroundColor: '#f3f3f3',
+      borderRadius: '5px',
+      overflow: 'hidden'
+    }
+  }, React.createElement("div", {
+    style: {
+      width: currentStep / totalSteps * 100 + "%",
+      height: '6px',
+      backgroundColor: '#4C9EEB',
+      transition: 'width 0.5s ease-in-out'
+    }
+  })));
+};
+
+var _templateObject$k, _templateObject2$g, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$7;
+var SidebarContainer = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: 100vh;\n  background: ", "; \n  transition: width 0.3s ease-in-out;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  padding: 20px;\n  position: fixed;\n  left: 0;\n  top: 0;\n  overflow: hidden;\n  z-index: 10;\n  justify-content: space-between;\n"])), function (_ref) {
+  var $isExpanded = _ref.$isExpanded;
+  return $isExpanded ? '225px' : '68px';
+}, function (_ref2) {
+  var $background = _ref2.$background;
+  return $background ? $background : colorVariables.accent.softBlue;
+});
+var SidebarItem = styled(NavLink)(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 28px;\n  width: 100%;\n  gap: 10px;\n  cursor: pointer;\n  border-radius: 4px;\n  color: ", ";\n  transition: background 0.3s;\n\n  &:hover {\n    background: ", ";\n  }\n"])), colorVariables.text.medium, colorVariables["default"].primary);
+var ContentWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n"])));
+var IconWrapper$2 = styled.div(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  background: ", "; \n  font-weight: bold;\n  padding: 4px;\n  border-radius: 4px;\n  width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > div:first-child {\n    cursor: pointer;\n  }\n"])), function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected ? colorVariables["default"].primary : colorVariables["default"].tertiary;
+});
+var Logo = styled.div(_templateObject5$7 || (_templateObject5$7 = _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 = styled.span(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  white-space: nowrap;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  color: ", ";\n  opacity: ", ";\n  visibility: ", ";\n  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n"])), function (_ref4) {
+  var $padding = _ref4.$padding;
+  return $padding;
+}, function (_ref5) {
+  var $fontSize = _ref5.$fontSize;
+  return $fontSize ? $fontSize : '20px';
+}, function (_ref6) {
+  var $fontWeight = _ref6.$fontWeight;
+  return $fontWeight ? $fontWeight : '500';
+}, function (_ref7) {
+  var $color = _ref7.$color;
+  return $color ? $color : colorVariables["default"].primary;
+}, function (_ref8) {
+  var $isExpanded = _ref8.$isExpanded;
+  return $isExpanded ? 1 : 0;
+}, function (_ref9) {
+  var $isExpanded = _ref9.$isExpanded;
+  return $isExpanded ? 'visible' : 'hidden';
+});
+var Sidebar = function Sidebar(_ref10) {
+  var logo = _ref10.logo,
+    content = _ref10.content,
+    background = _ref10.background,
+    ProfileContent = _ref10.ProfileContent,
+    _ref10$isExpanded = _ref10.isExpanded,
+    isExpanded = _ref10$isExpanded === void 0 ? false : _ref10$isExpanded,
+    setIsExpanded = _ref10.setIsExpanded;
+  var location = useLocation();
+  var getTopLevelPathWithSlash = function getTopLevelPathWithSlash(pathname) {
+    var parts = pathname.split('/').filter(String);
+    return parts.length > 0 ? '/' + parts[0] : '/';
+  };
+  var getTopLevelPath = function getTopLevelPath(pathname) {
+    var parts = pathname.split('/').filter(String);
+    return parts.length > 0 ? "/" + parts[0] + "/" : '/';
+  };
+  var topLevelPath = getTopLevelPathWithSlash(location.pathname) || getTopLevelPath(location.pathname);
+  return React.createElement(SidebarContainer, {
+    "$background": background,
+    "$isExpanded": isExpanded,
+    onMouseEnter: function onMouseEnter() {
+      return setIsExpanded(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsExpanded(false);
+    }
+  }, logo && React.createElement(Logo, null, React.createElement(Icon, {
+    icon: logo.icon
+  }), React.createElement(TextContainer, {
+    "$isExpanded": isExpanded,
+    "$fontWeight": "700"
+  }, logo.name)), React.createElement(ContentWrapper, null, content.map(function (item) {
+    var isActive = item.url.includes(topLevelPath);
+    return React.createElement(SidebarItem, {
+      to: item.url,
+      key: item.id
+    }, React.createElement(IconWrapper$2, {
+      "$selected": isActive
+    }, React.createElement(Icon, {
+      icon: item.icon,
+      size: 20,
+      weight: item.iconWeight,
+      color: isActive ? colorVariables.text.white : colorVariables.text.medium
+    })), React.createElement(TextContainer, {
+      "$isExpanded": isExpanded,
+      "$fontSize": "14px",
+      "$padding": '0px 10px 0px 0px',
+      "$color": colorVariables.text.medium
+    }, item.label));
+  })), ProfileContent);
+};
+
+var _templateObject$l, _templateObject2$h, _templateObject3$c, _templateObject4$9;
+var ContainerWrapper = styled.div(_templateObject$l || (_templateObject$l = _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 = styled.div(_templateObject2$h || (_templateObject2$h = _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';
+}, function (props) {
+  return props.$minWidth;
+}, function (props) {
+  return props.$background || 'inherit';
+}, function (props) {
+  return props.$padding;
+});
+var MainText = styled.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size:", ";\n  font-weight:", ";\n  line-height: 100%;\n"])), function (props) {
+  return props.$mtc;
+}, function (props) {
+  return props.$mtfs;
+}, function (props) {
+  return props.$mtw;
+});
+var SubText = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\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 TableCell = function TableCell(_ref2) {
+  var maintext = _ref2.maintext,
+    _ref2$maintextcolor = _ref2.maintextcolor,
+    maintextcolor = _ref2$maintextcolor === void 0 ? 'inherit' : _ref2$maintextcolor,
+    _ref2$maintextfontsiz = _ref2.maintextfontsize,
+    maintextfontsize = _ref2$maintextfontsiz === void 0 ? '14px' : _ref2$maintextfontsiz,
+    _ref2$maintextweight = _ref2.maintextweight,
+    maintextweight = _ref2$maintextweight === void 0 ? '500' : _ref2$maintextweight,
+    subtext = _ref2.subtext,
+    _ref2$subtextcolor = _ref2.subtextcolor,
+    subtextcolor = _ref2$subtextcolor === void 0 ? 'inherit' : _ref2$subtextcolor,
+    _ref2$subtextfontsize = _ref2.subtextfontsize,
+    subtextfontsize = _ref2$subtextfontsize === void 0 ? '10px' : _ref2$subtextfontsize,
+    _ref2$subtextweight = _ref2.subtextweight,
+    subtextweight = _ref2$subtextweight === void 0 ? '400' : _ref2$subtextweight,
+    _ref2$alignment = _ref2.alignment,
+    alignment = _ref2$alignment === void 0 ? 'center' : _ref2$alignment,
+    width = _ref2.width,
+    minWidth = _ref2.minWidth,
+    CustomFunction = _ref2.CustomFunction,
+    padding = _ref2.padding,
+    minHeight = _ref2.minHeight;
+  return React.createElement(ContainerWrapper, {
+    "$width": width,
+    "$minHeight": minHeight
+  }, CustomFunction ? React.createElement(CellContainer, {
+    "$align": alignment,
+    "$width": width,
+    "$minWidth": minWidth
+  }, CustomFunction) : React.createElement(CellContainer, {
+    "$align": alignment,
+    "$width": width,
+    "$minWidth": minWidth,
+    "$padding": padding
+  }, React.createElement(MainText, {
+    "$mtc": maintextcolor,
+    "$mtfs": maintextfontsize,
+    "$mtw": maintextweight
+  }, maintext), subtext && React.createElement(SubText, {
+    "$stc": subtextcolor,
+    "$stfs": subtextfontsize,
+    "$stw": subtextweight
+  }, subtext)));
+};
+
+var _templateObject$m;
+var TableRowContainer = styled$1.div(_templateObject$m || (_templateObject$m = _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;
+  var toggleChecked = function toggleChecked(index) {
+    rowconfig[index]._checked = !rowconfig[index]._checked;
+  };
+  return React.createElement(Container, null, rowconfig.map(function (data, Index) {
+    var _rowconfig$Index;
+    return React.createElement(TableRowContainer, {
+      key: Index
+    }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
+      "$padding": '0px 16px 0px 0px',
+      "$alignItems": 'center'
+    }, React.createElement("input", {
+      type: "checkbox",
+      checked: rowconfig[Index]._checked,
+      disabled: (_rowconfig$Index = rowconfig[Index]) === null || _rowconfig$Index === void 0 ? void 0 : _rowconfig$Index._selectable,
+      onClick: function onClick() {
+        return toggleChecked(Index);
+      }
+    })), data.rowData.map(function (cellData, cellkey) {
+      var _tableheaderconfig$he;
+      return React.createElement(TableCell, {
+        key: cellkey,
+        maintext: cellData.maintext,
+        width: (_tableheaderconfig$he = tableheaderconfig.headerdata[cellkey]) === null || _tableheaderconfig$he === void 0 ? void 0 : _tableheaderconfig$he.width,
+        background: cellData.background,
+        maintextcolor: cellData.maintextcolor,
+        maintextfontsize: cellData.maintextfontsize,
+        maintextweight: cellData.maintextweight,
+        subtext: cellData.subtext,
+        subtextcolor: cellData.subtextcolor,
+        subtextfontsize: cellData.subtextfontsize,
+        subtextweight: cellData.subtextweight,
+        alignment: cellData.alignment,
+        CustomFunction: cellData.CustomFunction,
+        minHeight: '30px'
+      });
+    }));
+  }));
+};
+
+var _templateObject$n, _templateObject2$i, _templateObject3$d, _templateObject4$a, _templateObject5$8;
+var TableContainer = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n  border-radius: 8px;\n"])), colorVariables.brand.light);
+var TableHeader = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  display: flex;\n  background: ", ";\n  color: ", ";\n  min-height: 36px;\n  align-items: center;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  padding: 9px 12px;\n"])), function (props) {
+  return props.$hbcolor || 'transparent';
+}, function (props) {
+  return props.$tcolor || 'white';
+});
+var TableContent = styled.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  svg {\n    cursor: pointer;\n  }\n"])));
+var TableData = styled.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n  overflow: auto;\n  scrollbar-width: thin;\n  height: 100%;\n  max-height: calc(100% - 36px);\n"])));
+var Divider = styled.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  height: 2px;\n  background: ", ";\n"])), colorVariables.border.extraLight);
+var Table = function Table(_ref) {
+  var tableObject = _ref.tableObject,
+    _ref$filter = _ref.filter,
+    filter = _ref$filter === void 0 ? false : _ref$filter,
+    loading = _ref.loading,
+    _ref$noDataText = _ref.noDataText,
+    noDataText = _ref$noDataText === void 0 ? 'No Data Found!' : _ref$noDataText;
+  var rowconfig = tableObject.rowconfig,
+    tableheaderconfig = tableObject.tableheaderconfig;
+  var _useState = useState(new Set()),
+    collapsedRoles = _useState[0],
+    setCollapsedRoles = _useState[1];
+  var _useState2 = useState(false),
+    isAllSelected = _useState2[0],
+    setIsAllSelected = _useState2[1];
+  var getRole = function getRole(row) {
+    var _row$rowData, _row$rowData$, _row$rowData$$CustomF, _row$rowData$$CustomF2;
+    return ((_row$rowData = row.rowData) === null || _row$rowData === void 0 ? void 0 : (_row$rowData$ = _row$rowData[1]) === null || _row$rowData$ === void 0 ? void 0 : (_row$rowData$$CustomF = _row$rowData$.CustomFunction) === null || _row$rowData$$CustomF === void 0 ? void 0 : (_row$rowData$$CustomF2 = _row$rowData$$CustomF.props) === null || _row$rowData$$CustomF2 === void 0 ? void 0 : _row$rowData$$CustomF2.text) || 'Unassigned';
+  };
+  var filteredRows = filter ? rowconfig.filter(function (row) {
+    return getRole(row);
+  }) : rowconfig;
+  var roleGroups = {};
+  filteredRows.forEach(function (row) {
+    var role = getRole(row);
+    if (!roleGroups[role]) roleGroups[role] = [];
+    roleGroups[role].push(row);
+  });
+  var toggleRoleVisibility = function toggleRoleVisibility(role) {
+    setCollapsedRoles(function (prev) {
+      var newSet = new Set(prev);
+      if (newSet.has(role)) {
+        newSet["delete"](role);
+      } else {
+        newSet.add(role);
+      }
+      return newSet;
+    });
+  };
+  var toggleSelectAll = function toggleSelectAll() {
+    var newState = !isAllSelected;
+    setIsAllSelected(newState);
+    tableObject.rowconfig.forEach(function (row) {
+      row._checked = newState;
+    });
+  };
+  useEffect(function () {
+    setIsAllSelected(false);
+  }, [rowconfig]);
+  return React.createElement(TableContainer, null, React.createElement(TableContent, null, React.createElement(TableHeader, {
+    "$hbcolor": tableheaderconfig.headercolor,
+    "$tcolor": tableheaderconfig.textcolor
+  }, tableheaderconfig.isAllSelectable && React.createElement(Container, {
+    "$padding": '0px 16px 0px 0px',
+    "$alignItems": 'center'
+  }, React.createElement("input", {
+    type: 'checkbox',
+    checked: isAllSelected,
+    onChange: toggleSelectAll
+  })), tableheaderconfig.headerdata.map(function (columndata, key) {
+    var _columndata$maintext;
+    return React.createElement(TableCell, {
+      key: key,
+      maintext: (_columndata$maintext = columndata.maintext) != null ? _columndata$maintext : '',
+      width: columndata.width,
+      alignment: columndata.alignment
+    });
+  })), loading ? React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$alignItems": 'center',
+    "$justifyContent": 'center',
+    "$padding": '24px 24px'
+  }, React.createElement(Loader, {
+    title: 'Loading users'
+  })) : rowconfig.length === 0 ? React.createElement(Container, {
+    "$flexDirection": 'column',
+    "$alignItems": 'center',
+    "$padding": '24px 24px',
+    "$justifyContent": 'center'
+  }, React.createElement(Span, null, noDataText)) : filter ? React.createElement(TableData, null, Object.entries(roleGroups).map(function (_ref2) {
+    var role = _ref2[0],
+      rows = _ref2[1];
+    return React.createElement(React.Fragment, {
+      key: role
+    }, React.createElement(Container, {
+      "$justifyContent": 'space-between',
+      "$padding": '9px 12px',
+      "$minHeight": '30px',
+      "$alignItems": 'center',
+      "$background": colorVariables.accent.light,
+      onClick: function onClick() {
+        return toggleRoleVisibility(role);
+      },
+      "$cursor": 'pointer',
+      "$border": "1px solid " + colorVariables.border.extraLight
+    }, React.createElement(Span, {
+      "$color": colorVariables.text.medium,
+      "$fontSize": '12px',
+      "$lineHeight": '100%'
+    }, role, " (", rows.length, ")"), React.createElement(Icon, {
+      size: 12,
+      icon: collapsedRoles.has(role) ? 'UpArrow' : 'DownArrow'
+    })), !collapsedRoles.has(role) && rows.map(function (row, index) {
+      return React.createElement(Container, {
+        key: index,
+        "$flexDirection": 'column'
+      }, React.createElement(TableRow, {
+        rowconfig: [row],
+        tableheaderconfig: tableheaderconfig
+      }), rows.length > 1 && index < rows.length - 1 && React.createElement(Divider, null));
+    }));
+  })) : React.createElement(TableData, null, filteredRows.map(function (row, index) {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, React.createElement(TableRow, {
+      rowconfig: [row],
+      tableheaderconfig: tableheaderconfig
+    }), filteredRows.length > 1 && index < filteredRows.length - 1 && React.createElement(Divider, null));
+  }))));
+};
+
+var _templateObject$o, _templateObject2$j, _templateObject3$e, _templateObject4$b, _templateObject5$9;
+var Container$5 = styled.div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  \n"])));
+var FirstContainer = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  font-family: NotoSans, sans-serif;\n  font-size: 16px;\n  gap: 24px;\n  border-bottom: 1px solid ", ";\n  padding: ", ";\n"])), colorVariables.border.light, function (_ref) {
+  var $headerPadding = _ref.$headerPadding;
+  return $headerPadding ? $headerPadding : '0px';
+});
+var TabContainer = styled.div(_templateObject3$e || (_templateObject3$e = _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 (_ref2) {
+  var $disabled = _ref2.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+}, function (_ref3) {
+  var $disabled = _ref3.$disabled;
+  return $disabled ? '0.6' : '1';
+}, colorVariables.text.medium, function (_ref4) {
+  var $headerHeight = _ref4.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled ? 'not-allowed' : 'pointer';
+});
+var TabItemContainer = styled.div(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: 8px;\n  height: 100%;\n  max-height: ", ";\n\n  &:after {\n    content: \"\";\n    display: ", ";\n    width: 100%;\n    height: 3px;\n    background: ", ";\n    position: absolute;\n    bottom: -1px;\n    left: 0px;\n  }\n"])), function (_ref6) {
+  var $headerHeight = _ref6.$headerHeight;
+  return $headerHeight ? $headerHeight : '34px';
+}, function (props) {
+  return props.$active ? 'block' : 'none';
+}, colorVariables["default"].primary);
+var DetailsFirstContainer = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 500;\n  font-family: NotoSans, sans-serif;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), function (props) {
+  return props.$active ? colorVariables["default"].primary : colorVariables.text.medium;
+});
+var Tab = function Tab(_ref7) {
+  var tabItems = _ref7.tabItems,
+    _ref7$disabled = _ref7.disabled,
+    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+    headerHeight = _ref7.headerHeight,
+    headerPadding = _ref7.headerPadding,
+    activeTab = _ref7.activeTab,
+    border = _ref7.border;
+  return React.createElement(Container$5, {
+    "$border": border
+  }, React.createElement(FirstContainer, {
+    "$headerPadding": headerPadding
+  }, tabItems.map(function (tab, index) {
+    return React.createElement(TabContainer, {
+      key: index,
+      onClick: function onClick() {
+        if (!disabled && tab.onClick) tab.onClick();
+      },
+      "$disabled": disabled,
+      "$headerHeight": headerHeight
+    }, React.createElement(TabItemContainer, {
+      "$active": activeTab === tab.title,
+      "$headerHeight": headerHeight
+    }, tab.icon && React.createElement(Icon, {
+      color: activeTab === tab.title ? tab.activeColor : colorVariables.text.medium,
+      icon: tab.icon,
+      size: tab.iconSize,
+      weight: tab.iconWeight
+    }), React.createElement(DetailsFirstContainer, {
+      "$active": activeTab === tab.title
+    }, tab.title)));
+  })), tabItems.map(function (tab, index) {
+    return activeTab === tab.title && React.createElement(Container$5, {
+      key: index
+    }, tab.content);
+  }));
+};
+
+var InternalTabs = function InternalTabs(_ref) {
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? colorVariables.text.white : _ref$backgroundColor,
+    _ref$activeTabBg = _ref.activeTabBg,
+    activeTabBg = _ref$activeTabBg === void 0 ? colorVariables.accent.softBlue : _ref$activeTabBg,
+    _ref$textColor = _ref.textColor,
+    textColor = _ref$textColor === void 0 ? colorVariables["default"].primary : _ref$textColor,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return React.createElement(Container, {
+    "$background": backgroundColor,
+    "$padding": '3px',
+    "$borderRadius": '4px',
+    "$justifyContent": 'space-between',
+    "$opacity": disabled ? 0.6 : 1
+  }, tabs.map(function (tab) {
+    return React.createElement(Container, {
+      key: tab.value,
+      "$borderRadius": '4px',
+      "$width": '126px',
+      "$justifyContent": 'center',
+      "$alignItems": 'center',
+      "$cursor": disabled ? 'not-allowed' : 'pointer',
+      onClick: disabled ? undefined : tab.onClick,
+      "$background": activeTab === tab.value ? activeTabBg : colorVariables["default"].tertiary,
+      "$color": activeTab === tab.value ? textColor : colorVariables.text.medium
+    }, React.createElement(Span, {
+      "$fontSize": '14px',
+      "$color": activeTab === tab.value ? textColor : colorVariables.text.medium
+    }, tab.title));
+  }));
+};
+
+export { Badge, Breadcrumbs, ButtonComponent as Button, ButtonCarousel, CircularLoader, Container, DatePicker, Icon, InternalTabs, Loader, MultiSelectDropdown, OptionComponent, Pagination, ProgressBar, SearchBox, SelectOption, SelectedOption, Sidebar, Span, Table, TableCell, TableRow, Tab as Tabs, TextArea, InputField as TextField, TextFieldWithDropdown, colorVariables, convertEpochToDateString, convertEpochToOnlyDate, convertToEpoch, darkColorVariables, formatCalendarDateTime, formatDate, formatEpochToIST, formatTimestamp, getSystemTimezoneAbbreviation, themes, timeAgo, timeStringToSeconds, useClickOutside, useCustomModal };
 //# sourceMappingURL=index.modern.js.map