labsense-ui-kit 1.4.1 → 1.4.3

package/dist/index.modern.js

@@ -1007,6 +1007,26 @@ var Circle = function Circle(_ref) {
   }));
 };
 
+var CircularBack = function CircularBack(_ref) {
+  var size = _ref.size,
+    color = _ref.color,
+    weight = _ref.weight;
+  return React.createElement("svg", {
+    width: size,
+    height: size,
+    strokeWidth: weight,
+    viewBox: '0 0 512 512',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("path", {
+    d: "M301 3.00005C301.913 3.16634 302.826 3.33263 303.767 3.50396C345.399 11.1637 384.161 29.4063 417 56.0001C417.545 56.4401 418.089 56.8802 418.65 57.3335C432.722 68.8118 445.937 81.5772 457 96.0001C457.759 96.9308 458.519 97.8615 459.301 98.8204C485.16 131.072 501.628 170.525 509 211C509.164 211.836 509.328 212.671 509.496 213.532C514.787 241.242 514.417 273.351 509 301C508.834 301.913 508.668 302.826 508.496 303.767C500.836 345.399 482.594 384.161 456 417C455.56 417.545 455.12 418.089 454.667 418.65C443.188 432.722 430.423 445.937 416 457C415.069 457.759 414.139 458.519 413.18 459.301C380.928 485.16 341.475 501.628 301 509C300.164 509.164 299.329 509.327 298.468 509.496C270.758 514.787 238.649 514.417 211 509C210.087 508.834 209.174 508.667 208.233 508.496C166.601 500.836 127.84 482.594 95.0001 456C94.4556 455.56 93.9112 455.12 93.3502 454.667C79.2784 443.188 66.0633 430.423 55.0001 416C54.2408 415.069 53.4816 414.139 52.6993 413.18C20.7149 373.289 0.0662416 319.531 -0.203033 268.207C-0.210048 267.307 -0.217047 266.406 -0.224274 265.478C-0.241671 262.59 -0.248141 259.701 -0.249908 256.813C-0.250921 255.332 -0.250921 255.332 -0.251953 253.822C-0.236221 239.35 0.129092 225.23 3.00009 211C3.17702 210.098 3.35394 209.196 3.53622 208.267C8.80417 182.014 17.4903 157.655 30.0001 134C30.3412 133.35 30.6823 132.699 31.0338 132.029C39.5177 115.986 49.9932 101.576 62.0001 88.0001C62.7245 87.1647 63.449 86.3294 64.1954 85.4688C73.9402 74.3936 84.3397 64.0489 96.0001 55.0001C96.9347 54.2369 97.8692 53.4738 98.8321 52.6876C131.096 26.8432 170.521 10.3729 211 3.00005C211.836 2.83634 212.671 2.67263 213.532 2.50396C241.242 -2.78651 273.351 -2.41673 301 3.00005ZM215 39.0001C214.156 39.1717 213.312 39.3433 212.442 39.5201C199.238 42.2393 186.569 46.1413 174 51.0001C173.311 51.2651 172.623 51.5302 171.913 51.8033C148.721 60.9101 127.074 74.9039 109 92.0001C107.63 93.1935 106.255 94.3813 104.875 95.5626C97.0734 102.395 90.4264 109.869 84.0001 118C83.5897 118.512 83.1793 119.025 82.7564 119.552C76.5151 127.351 71.0482 135.362 66.0001 144C65.2861 145.166 64.5712 146.331 63.8556 147.496C46.8137 175.819 35.9885 211.704 35.797 244.891C35.79 245.709 35.783 246.528 35.7757 247.371C35.7583 249.998 35.7519 252.624 35.7501 255.25C35.7491 256.597 35.7491 256.597 35.748 257.97C35.7639 271.212 36.2025 284.014 39.0001 297C39.1717 297.844 39.3433 298.688 39.5201 299.558C42.2393 312.763 46.1413 325.431 51.0001 338C51.2652 338.689 51.5302 339.377 51.8033 340.087C60.9102 363.279 74.9039 384.926 92.0001 403C93.1936 404.37 94.3813 405.745 95.5626 407.125C102.397 414.929 109.875 421.562 118 428C118.954 428.783 119.908 429.565 120.891 430.371C154.914 457.633 201.043 475.95 244.891 476.203C245.709 476.21 246.528 476.217 247.371 476.224C249.998 476.242 252.624 476.248 255.25 476.25C256.148 476.251 257.046 476.251 257.97 476.252C271.212 476.236 284.014 475.798 297 473C297.844 472.828 298.688 472.657 299.558 472.48C312.763 469.761 325.431 465.859 338 461C338.689 460.735 339.377 460.47 340.087 460.197C374.403 446.722 406.623 422.315 429 393C429.491 392.358 429.982 391.716 430.488 391.055C438.243 380.845 445.008 370.399 450.936 359.03C451.885 357.219 452.868 355.427 453.856 353.637C463.246 336.038 469.159 316.508 473 297C473.162 296.241 473.325 295.481 473.492 294.699C478.724 269.65 478.382 239.982 473 215C472.828 214.156 472.657 213.312 472.48 212.442C469.761 199.238 465.859 186.569 461 174C460.602 172.967 460.602 172.967 460.197 171.913C449.47 144.595 431.982 121.203 412 100C410.966 98.9018 410.966 98.9018 409.91 97.7813C395.944 83.3864 378.656 71.2977 360.928 62.0132C359.048 61.0255 357.187 60.0087 355.324 58.9883C337.144 49.2462 317.181 42.9742 297 39.0001C296.241 38.8378 295.481 38.6755 294.699 38.5084C269.65 33.2762 239.982 33.6184 215 39.0001Z",
+    fill: color
+  }), React.createElement("path", {
+    d: "M242.25 142.063C246.669 145.176 250.274 148.822 252 154C252.238 155.981 252.238 155.981 252.312 158.188C252.369 159.261 252.369 159.261 252.426 160.356C251.243 167.704 246.648 172.929 241.487 177.967C240.843 178.612 240.199 179.257 239.535 179.921C237.423 182.03 235.298 184.124 233.172 186.219C231.697 187.686 230.223 189.155 228.75 190.624C224.885 194.473 221.009 198.31 217.13 202.144C213.168 206.066 209.217 209.998 205.266 213.93C197.522 221.631 189.765 229.32 182 237C183.009 237.002 184.018 237.003 185.057 237.004C209.603 237.041 234.148 237.101 258.694 237.184C270.564 237.224 282.434 237.256 294.304 237.271C304.65 237.284 314.996 237.311 325.342 237.355C330.82 237.377 336.298 237.393 341.776 237.392C346.933 237.391 352.09 237.409 357.247 237.441C359.139 237.45 361.031 237.451 362.923 237.446C365.509 237.439 368.093 237.457 370.679 237.481C371.425 237.473 372.172 237.466 372.94 237.458C379.072 237.558 383.229 239.459 387.742 243.598C392.131 249.273 392.767 253.986 392 261C390.026 266.687 386.149 270.412 380.842 273.088C377.193 274.259 373.749 274.288 369.958 274.279C369.153 274.284 368.349 274.29 367.519 274.296C364.826 274.313 362.133 274.316 359.44 274.319C357.508 274.328 355.577 274.338 353.645 274.349C348.402 274.377 343.158 274.392 337.915 274.405C332.435 274.42 326.955 274.447 321.475 274.473C311.098 274.52 300.722 274.556 290.345 274.589C278.531 274.628 266.718 274.677 254.904 274.727C230.603 274.831 206.301 274.92 182 275C182.833 275.824 183.665 276.648 184.523 277.497C192.377 285.269 200.219 293.051 208.052 300.845C212.079 304.851 216.109 308.853 220.148 312.846C224.047 316.702 227.937 320.567 231.819 324.44C233.301 325.914 234.786 327.385 236.275 328.852C238.362 330.91 240.437 332.981 242.509 335.055C243.125 335.656 243.74 336.258 244.375 336.877C248.667 341.211 251.393 345.279 252.398 351.441C252.335 357.207 251.589 361.393 247.348 365.664C243.079 369.473 240.018 371.143 234.188 371.25C232.94 371.289 232.94 371.289 231.668 371.328C226.145 370.649 222.262 367.637 218.42 363.801C217.556 362.945 216.692 362.09 215.803 361.209C214.874 360.274 213.945 359.339 212.987 358.376C211.985 357.378 210.983 356.38 209.98 355.384C207.266 352.684 204.562 349.975 201.861 347.264C199.029 344.424 196.189 341.592 193.351 338.759C188.588 334.001 183.831 329.237 179.078 324.469C173.585 318.96 168.081 313.461 162.572 307.968C157.838 303.248 153.109 298.521 148.386 293.79C145.566 290.966 142.745 288.144 139.918 285.327C137.262 282.679 134.613 280.024 131.969 277.364C130.999 276.389 130.026 275.417 129.05 274.448C127.717 273.123 126.395 271.789 125.072 270.453C124.33 269.71 123.587 268.966 122.822 268.2C119.712 264.445 118.71 260.88 118.688 256.063C118.671 255.249 118.654 254.436 118.637 253.598C119.403 248.12 122.381 244.244 126.199 240.42C127.055 239.556 127.91 238.692 128.791 237.803C129.726 236.874 130.661 235.945 131.625 234.987C132.622 233.985 133.62 232.983 134.616 231.98C137.316 229.266 140.025 226.563 142.736 223.861C145.576 221.029 148.408 218.19 151.241 215.351C155.999 210.588 160.763 205.831 165.531 201.078C171.04 195.585 176.539 190.081 182.032 184.572C186.752 179.838 191.479 175.109 196.21 170.386C199.034 167.566 201.856 164.745 204.673 161.918C207.321 159.262 209.976 156.613 212.636 153.969C213.611 152.999 214.583 152.026 215.552 151.05C216.877 149.717 218.211 148.395 219.547 147.073C220.29 146.33 221.034 145.587 221.8 144.822C227.707 139.929 235.172 139.749 242.25 142.063Z",
+    fill: color
+  }));
+};
+
 var Check = function Check(_ref) {
   var size = _ref.size,
     color = _ref.color,
@@ -6394,6 +6414,7 @@ var IconSVGs = {
   CCTV_2: CCTV_2,
   Certificate_1: Certificate_1,
   Circle: Circle,
+  CircularBack: CircularBack,
   Check: Check,
   CircularEdit: CircularEdit,
   CircularFilledWarning: CircularFilledWarning,
@@ -8537,7 +8558,7 @@ var LabelText = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTe
     theme = _ref21.theme;
   return $labelColor || theme.vms.text.medium;
 });
-var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n"])), function (_ref22) {
+var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  max-height: 156px;\n  padding: 4px;\n  box-sizing: border-box;\n  border: ", ";\n  border-radius: ", ";\n  width: ", ";\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  margin-top: 8px;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 2;\n  scrollbar-width: thin;\n  \n  ", "\n"])), function (_ref22) {
   var theme = _ref22.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref23) {
@@ -8550,12 +8571,30 @@ var DropdownMenu = styled.div(_templateObject6$4 || (_templateObject6$4 = _tagge
   var $menuBackground = _ref25.$menuBackground,
     theme = _ref25.theme;
   return $menuBackground || theme.vms.accent.light_2;
+}, function (_ref26) {
+  var $position = _ref26.$position;
+  switch ($position) {
+    case 'topLeft':
+      return "\n          bottom: calc(100% + 8px);\n          left: 0;\n          top: auto;\n        ";
+    case 'topCenter':
+      return "\n          bottom: calc(100% + 8px);\n          left: 50%;\n          transform: translateX(-50%);\n          top: auto;\n        ";
+    case 'topRight':
+      return "\n          bottom: calc(100% + 8px);\n          right: 0;\n          top: auto;\n        ";
+    case 'bottomLeft':
+      return "\n          top: calc(100% + 8px);\n          left: 0;\n          bottom: auto;\n        ";
+    case 'bottomCenter':
+      return "\n          top: calc(100% + 8px);\n          left: 50%;\n          transform: translateX(-50%);\n          bottom: auto;\n        ";
+    case 'bottomRight':
+      return "\n          top: calc(100% + 8px);\n          right: 0;\n          bottom: auto;\n        ";
+    default:
+      return '';
+  }
 });
 var SelectedOptionsWrapper = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  height: 100%;\n"])));
-var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _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-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref26) {
-  var $selectedOptionBackground = _ref26.$selectedOptionBackground,
-    $disabled = _ref26.$disabled,
-    theme = _ref26.theme;
+var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _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-style: normal;\n  font-weight: 400;\n  font-size: 12px;\n  line-height: 12px;\n  color: ", ";\n"])), function (_ref27) {
+  var $selectedOptionBackground = _ref27.$selectedOptionBackground,
+    $disabled = _ref27.$disabled,
+    theme = _ref27.theme;
   switch ($selectedOptionBackground) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8576,9 +8615,9 @@ var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _
     default:
       return $selectedOptionBackground || theme.vms.accent.light_2;
   }
-}, function (_ref27) {
-  var $selectedOptionColor = _ref27.$selectedOptionColor,
-    theme = _ref27.theme;
+}, function (_ref28) {
+  var $selectedOptionColor = _ref28.$selectedOptionColor,
+    theme = _ref28.theme;
   switch ($selectedOptionColor) {
     case 'dark':
       return theme.vms.text.dark;
@@ -8600,88 +8639,94 @@ var SelectedOptionDiv = styled.div(_templateObject8$2 || (_templateObject8$2 = _
       return $selectedOptionColor;
   }
 });
-var RemoveIcon = styled.div(_templateObject9$2 || (_templateObject9$2 = _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 (_ref28) {
-  var $disabled = _ref28.$disabled;
+var RemoveIcon = styled.div(_templateObject9$2 || (_templateObject9$2 = _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 (_ref29) {
+  var $disabled = _ref29.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
-}, function (_ref29) {
-  var removeIconBackground = _ref29.removeIconBackground,
-    $type = _ref29.$type,
-    theme = _ref29.theme;
-  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
 }, function (_ref30) {
-  var $disabled = _ref30.$disabled;
+  var removeIconBackground = _ref30.removeIconBackground,
+    $type = _ref30.$type,
+    theme = _ref30.theme;
+  return removeIconBackground ? removeIconBackground : $type === 'remove' ? '#5E5E5E24' : theme.vms.disabled.primary;
+}, function (_ref31) {
+  var $disabled = _ref31.$disabled;
   return $disabled ? 'not-allowed' : 'pointer';
 });
 var TextWrapper = styled.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
-var Asterisk = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref31) {
-  var theme = _ref31.theme;
+var Asterisk = styled.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 10px;\n  height: fit-content;\n  position: absolute;\n  top: -2px;\n  right: -8px;\n"])), function (_ref32) {
+  var theme = _ref32.theme;
   return theme.vms["default"].error;
 });
-var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
-  var title = _ref32.title,
-    titleWeight = _ref32.titleWeight,
-    titleSize = _ref32.titleSize,
-    titleColor = _ref32.titleColor,
-    _ref32$labelText = _ref32.labelText,
-    labelText = _ref32$labelText === void 0 ? 'Select Cameras' : _ref32$labelText,
-    labelStyle = _ref32.labelStyle,
-    labelColor = _ref32.labelColor,
-    _ref32$replaceLabel = _ref32.replaceLabel,
-    replaceLabel = _ref32$replaceLabel === void 0 ? true : _ref32$replaceLabel,
-    options = _ref32.options,
-    width = _ref32.width,
-    optionWidth = _ref32.optionWidth,
-    height = _ref32.height,
-    placeholder = _ref32.placeholder,
-    border = _ref32.border,
-    background = _ref32.background,
-    selectedOptionBackground = _ref32.selectedOptionBackground,
-    selectedOptionColor = _ref32.selectedOptionColor,
-    menuBackground = _ref32.menuBackground,
-    optionsBorderRadius = _ref32.optionsBorderRadius,
-    borderRadius = _ref32.borderRadius,
-    removeIconBackground = _ref32.removeIconBackground,
-    handleSelectChange = _ref32.handleSelectChange,
-    selectedOptions = _ref32.selectedOptions,
-    placeholderColor = _ref32.placeholderColor,
-    optionBorder = _ref32.optionBorder,
-    optionColor = _ref32.optionColor,
-    searchIcon = _ref32.searchIcon,
-    searchbarTextColor = _ref32.searchbarTextColor,
-    searchBoxBackground = _ref32.searchBoxBackground,
-    searchBoxBorder = _ref32.searchBoxBorder,
-    searchBoxBorderRadius = _ref32.searchBoxBorderRadius,
-    size = _ref32.size,
-    removeIcon = _ref32.removeIcon,
-    type = _ref32.type,
-    icon = _ref32.icon,
-    _ref32$disabled = _ref32.disabled,
-    disabled = _ref32$disabled === void 0 ? false : _ref32$disabled,
-    _ref32$required = _ref32.required,
-    required = _ref32$required === void 0 ? false : _ref32$required,
-    _ref32$searchBox = _ref32.searchBox,
-    searchBox = _ref32$searchBox === void 0 ? true : _ref32$searchBox,
-    _ref32$NoOptionsText = _ref32.NoOptionsText,
-    NoOptionsText = _ref32$NoOptionsText === void 0 ? 'No Options Available' : _ref32$NoOptionsText,
-    _ref32$selectAllOptio = _ref32.selectAllOption,
-    selectAllOption = _ref32$selectAllOptio === void 0 ? false : _ref32$selectAllOptio,
-    _ref32$selectAllLabel = _ref32.selectAllLabel,
-    selectAllLabel = _ref32$selectAllLabel === void 0 ? 'Select All' : _ref32$selectAllLabel;
+var MultiSelectDropdown = function MultiSelectDropdown(_ref33) {
+  var title = _ref33.title,
+    titleWeight = _ref33.titleWeight,
+    titleSize = _ref33.titleSize,
+    titleColor = _ref33.titleColor,
+    _ref33$labelText = _ref33.labelText,
+    labelText = _ref33$labelText === void 0 ? 'Select Cameras' : _ref33$labelText,
+    labelStyle = _ref33.labelStyle,
+    labelColor = _ref33.labelColor,
+    _ref33$replaceLabel = _ref33.replaceLabel,
+    replaceLabel = _ref33$replaceLabel === void 0 ? true : _ref33$replaceLabel,
+    options = _ref33.options,
+    width = _ref33.width,
+    optionWidth = _ref33.optionWidth,
+    height = _ref33.height,
+    placeholder = _ref33.placeholder,
+    border = _ref33.border,
+    background = _ref33.background,
+    selectedOptionBackground = _ref33.selectedOptionBackground,
+    selectedOptionColor = _ref33.selectedOptionColor,
+    menuBackground = _ref33.menuBackground,
+    optionsBorderRadius = _ref33.optionsBorderRadius,
+    borderRadius = _ref33.borderRadius,
+    removeIconBackground = _ref33.removeIconBackground,
+    handleSelectChange = _ref33.handleSelectChange,
+    selectedOptions = _ref33.selectedOptions,
+    placeholderColor = _ref33.placeholderColor,
+    optionBorder = _ref33.optionBorder,
+    optionColor = _ref33.optionColor,
+    searchIcon = _ref33.searchIcon,
+    searchbarTextColor = _ref33.searchbarTextColor,
+    searchBoxBackground = _ref33.searchBoxBackground,
+    searchBoxBorder = _ref33.searchBoxBorder,
+    searchBoxBorderRadius = _ref33.searchBoxBorderRadius,
+    size = _ref33.size,
+    removeIcon = _ref33.removeIcon,
+    type = _ref33.type,
+    icon = _ref33.icon,
+    _ref33$disabled = _ref33.disabled,
+    disabled = _ref33$disabled === void 0 ? false : _ref33$disabled,
+    _ref33$required = _ref33.required,
+    required = _ref33$required === void 0 ? false : _ref33$required,
+    _ref33$searchBox = _ref33.searchBox,
+    searchBox = _ref33$searchBox === void 0 ? true : _ref33$searchBox,
+    _ref33$NoOptionsText = _ref33.NoOptionsText,
+    NoOptionsText = _ref33$NoOptionsText === void 0 ? 'No Options Available' : _ref33$NoOptionsText,
+    _ref33$selectAllOptio = _ref33.selectAllOption,
+    selectAllOption = _ref33$selectAllOptio === void 0 ? false : _ref33$selectAllOptio,
+    _ref33$selectAllLabel = _ref33.selectAllLabel,
+    selectAllLabel = _ref33$selectAllLabel === void 0 ? 'Select All' : _ref33$selectAllLabel,
+    dropdownPosition = _ref33.dropdownPosition;
   var themeColors = useTheme();
   var _useState = useState(false),
     dropUp = _useState[0],
     setDropUp = _useState[1];
-  var _useState2 = useState(false),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+  var _useState2 = useState('left'),
+    horizontalAlign = _useState2[0],
+    setHorizontalAlign = _useState2[1];
+  var _useState3 = useState(false),
+    isOpen = _useState3[0],
+    setIsOpen = _useState3[1];
   var dropdownRef = useRef(null);
   var dropdownButtonRef = useRef(null);
+  var dropdownMenuRef = useRef(null);
   var toggleDropdown = function toggleDropdown() {
     if (disabled) return;
     var refToUse = dropdownRef.current;
-    if (refToUse) {
+    if (refToUse && !dropdownPosition) {
       var rect = refToUse.getBoundingClientRect();
       var windowHeight = window.innerHeight;
+      var windowWidth = window.innerWidth;
       var spaceBelow = windowHeight - rect.bottom;
       var spaceAbove = rect.top;
       var dropdownHeight = 156;
@@ -8690,6 +8735,19 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
       } else {
         setDropUp(false);
       }
+      var estimatedDropdownWidth = optionWidth ? parseInt(optionWidth) : 200;
+      var spaceRight = windowWidth - rect.left;
+      var spaceLeft = rect.right;
+      var buttonWidth = rect.width;
+      if (spaceRight >= estimatedDropdownWidth) {
+        setHorizontalAlign('left');
+      } else if (spaceLeft >= estimatedDropdownWidth) {
+        setHorizontalAlign('right');
+      } else if (rect.left + buttonWidth / 2 >= estimatedDropdownWidth / 2 && windowWidth - (rect.left + buttonWidth / 2) >= estimatedDropdownWidth / 2) {
+        setHorizontalAlign('center');
+      } else {
+        setHorizontalAlign('left');
+      }
     }
     setIsOpen(function (prev) {
       return !prev;
@@ -8829,12 +8887,17 @@ var MultiSelectDropdown = function MultiSelectDropdown(_ref32) {
     weight: '2px',
     color: themeColors.vms.text.medium
   })), isOpen && React.createElement(DropdownMenu, {
+    ref: dropdownMenuRef,
     "$width": optionWidth,
     "$menuBackground": menuBackground || themeColors.vms.text.white,
     "$optionsBorderRadius": optionsBorderRadius,
-    style: {
+    "$position": dropdownPosition,
+    style: dropdownPosition ? undefined : {
       top: dropUp ? 'auto' : 'calc(100% + 8px)',
-      bottom: dropUp ? 'calc(100% + 8px)' : 'auto'
+      bottom: dropUp ? 'calc(100% + 8px)' : 'auto',
+      left: horizontalAlign === 'left' ? '0' : horizontalAlign === 'center' ? '50%' : 'auto',
+      right: horizontalAlign === 'right' ? '0' : 'auto',
+      transform: horizontalAlign === 'center' ? 'translateX(-50%)' : 'none'
     }
   }, React.createElement(OptionComponent, {
     options: computedOptions,