feat: add margin left to group option

Author: bishalshrestha013

packages/ui/src/FormWidgets/Select/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-
 import Divider from "@/Divider";
 
 import { PopupMenu, PopupMenuProperties } from "../../Popup";
@@ -451,9 +450,10 @@ export const Select = <T extends string | number>({
         role="option"
         className={
           `${!multiple && value === option.value ? "selected" : ""}
-    ${disabled ? "disabled" : ""}
-    ${index === focusedOptionIndex ? "focused" : ""}
-  `.trim() || undefined
+          ${isGrouped ? "group-option" : ""}
+          ${disabled ? "disabled" : ""}
+          ${index === focusedOptionIndex ? "focused" : ""}
+          `.trim() || undefined
         }
         onClick={() => {
           if (!disabled) {

packages/ui/src/assets/css/form-widgets/select.css

@@ -143,6 +143,9 @@
   font-weight: 600;
 }
 
+.select-menu ul > li.group-option {
+  margin-left: 0.5rem;
+}
 
 .select-menu ul > li:hover:not(.group-label),
 .select-menu ul > li.focused:not(.group-label) {