Merge remote-tracking branch 'origin/main' into simulation

app/src/components/ui/inputs/MultiLevelDropDown.tsx

@@ -141,6 +141,7 @@
 // export default MultiLevelDropdown;
 
 import React, { useState, useRef, useEffect } from "react";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
 
 // Dropdown Item Component
 const DropdownItem = ({
@@ -173,7 +174,13 @@ const NestedDropdown = ({
         className={`dropdown-trigger ${open ? "open" : ""}`}
         onClick={() => setOpen(!open)}
       >
-        {label} <span className="icon">{open ? "▼" : "▶"}</span>
+        {label}
+        <div
+          className="arrow-container"
+          style={{ rotate: open ? "" : "-90deg" }}
+        >
+          <ArrowIcon />
+        </div>
       </div>
       {open && (
         <div className="submenu">
@@ -199,11 +206,11 @@ interface MultiLevelDropdownProps {
 }
 
 // Main Multi-Level Dropdown Component
-const MultiLevelDropdown = ({ 
-  data, 
-  onSelect, 
+const MultiLevelDropdown = ({
+  data,
+  onSelect,
   onUnselect,
-  selectedValue 
+  selectedValue,
 }: MultiLevelDropdownProps) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -236,7 +243,7 @@ const MultiLevelDropdown = ({
   };
 
   // Determine the display label
-  const displayLabel = selectedValue 
+  const displayLabel = selectedValue
     ? `${selectedValue.name} - ${selectedValue.fields}`
     : "Dropdown trigger";
 
@@ -270,4 +277,3 @@ const MultiLevelDropdown = ({
 };
 
 export default MultiLevelDropdown;
-