sellmate-design-system-react 0.8.3 → 0.9.0

package/dist/components/SKeyValueTable/SKeyValueTable.cjs

@@ -2907,6 +2907,75 @@ function useInsideModal() {
   return react.useContext(InsideModalContext);
 }
 
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
+};
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName;
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
+    }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
+    });
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
+
 // src/components/STag/tag.config.ts
 var TAG_SIZE_CONFIG = {
   xs: {
@@ -3105,7 +3174,14 @@ function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
   const singleLine = message.length === 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: singleLine ? "leading-[24px]" : void 0, children: line }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: singleLine ? "leading-[24px]" : void 0,
+      dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(line) }
+    },
+    i
+  )) });
 }
 var STooltip = react.forwardRef(function STooltip2({
   content,
@@ -3163,7 +3239,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
+    "z-50 w-fit whitespace-nowrap rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -4187,75 +4263,6 @@ var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scr
 var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
 var SCROLLBAR_TRACK_BG_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_var(--color-grey-10)] [&::-webkit-scrollbar]:bg-[var(--color-grey-10)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-10)]";
 var SCROLLBAR_TRACK_BORDER_CLASS = "[&::-webkit-scrollbar-track:vertical]:[border-left:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-track:horizontal]:[border-top:1px_solid_var(--sys-color-border-default)] [&::-webkit-scrollbar-thumb:vertical]:[border-left-width:3px] [&::-webkit-scrollbar-thumb:horizontal]:[border-top-width:3px]";
-
-// src/lib/sanitize-inline-html.ts
-var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
-var ALLOWED_ATTRS_BY_TAG = {
-  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
-};
-var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
-var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
-var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
-  "SCRIPT",
-  "STYLE",
-  "IFRAME",
-  "OBJECT",
-  "EMBED",
-  "META",
-  "LINK",
-  "BASE",
-  "NOSCRIPT",
-  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
-  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
-  "SVG",
-  "MATH",
-  "TEMPLATE"
-]);
-var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-var sanitizeNode = (node) => {
-  if (node.nodeType === Node.COMMENT_NODE) {
-    node.remove();
-    return;
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return;
-  const element = node;
-  const tagName = element.tagName;
-  if (DROP_CONTENT_TAGS.has(tagName)) {
-    element.remove();
-    return;
-  }
-  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
-  if (ALLOWED_INLINE_TAGS.has(tagName)) {
-    if (element.hasAttribute("className")) {
-      const val = element.getAttribute("className");
-      element.removeAttribute("className");
-      if (!element.hasAttribute("class")) element.setAttribute("class", val);
-    }
-    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
-    Array.from(element.attributes).forEach((attr) => {
-      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
-    });
-    if (tagName === "A") {
-      const href = element.getAttribute("href");
-      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
-      if (element.hasAttribute("target")) {
-        element.setAttribute("rel", "noopener noreferrer");
-      }
-    }
-    return;
-  }
-  const parent = element.parentNode;
-  if (parent == null) return;
-  while (element.firstChild) parent.insertBefore(element.firstChild, element);
-  parent.removeChild(element);
-};
-var sanitizeInlineHtml = (value) => {
-  if (typeof document === "undefined") return escapeHtml(value);
-  const template = document.createElement("template");
-  template.innerHTML = value;
-  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
-  return template.innerHTML;
-};
 function SPortal({
   open,
   onClose,
@@ -4362,6 +4369,16 @@ function flattenOptions(options, depth = 1) {
   return out;
 }
 var selectableOptions = (flat) => flat.filter((o) => !o.isGroup && !o.disabled);
+function collectGroupLeafValues(flat, groupIndex) {
+  const group = flat[groupIndex];
+  if (group == null || !group.isGroup) return [];
+  const values = [];
+  for (let i = groupIndex + 1; i < flat.length; i++) {
+    if (flat[i].depth <= group.depth) break;
+    if (!flat[i].isGroup && !flat[i].disabled) values.push(flat[i].value);
+  }
+  return values;
+}
 var isHtmlLabel = (label) => /<[a-z][\s\S]*>/i.test(label);
 var extractText = (html) => html.replace(/<[^>]*>/g, "");
 var SEARCH_THRESHOLD = 11;
@@ -4487,16 +4504,31 @@ var SSelect = react.forwardRef(function SSelect2({
   const allValues = selectable.map((o) => o.value);
   const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
   const hasItems = filtered.some((o) => !o.isGroup);
+  const groupLeafValues = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((o, i) => {
+      if (o.isGroup) map.set(i, collectGroupLeafValues(filtered, i));
+    });
+    return map;
+  }, [filtered]);
   const navigableItems = react.useMemo(() => {
     const items = [];
     if (multi && useSelectAll && allValues.length > 0) {
-      items.push({ value: "__select_all__", isSelectAll: true });
+      items.push({ key: "__select_all__", isSelectAll: true });
     }
-    filtered.forEach((o) => {
-      if (!o.isGroup && !o.disabled) items.push({ value: o.value });
+    filtered.forEach((o, i) => {
+      if (o.disabled) return;
+      if (o.isGroup) {
+        if (!multi) return;
+        const leafValues = groupLeafValues.get(i) ?? [];
+        if (leafValues.length === 0) return;
+        items.push({ key: `__group_${i}__`, isGroup: true, leafValues });
+      } else {
+        items.push({ key: o.value, value: o.value });
+      }
     });
     return items;
-  }, [allValues.length, filtered, multi, useSelectAll]);
+  }, [allValues.length, filtered, groupLeafValues, multi, useSelectAll]);
   const triggerText = (() => {
     if (selected.length === 0) return placeholder;
     if (multi) {
@@ -4518,6 +4550,17 @@ var SSelect = react.forwardRef(function SSelect2({
   const handleSelectAll = () => {
     emit(allSelected ? [] : allValues);
   };
+  const handleToggleGroup = (leafValues) => {
+    if (leafValues.length === 0) return;
+    const selectedSet = new Set(selected);
+    const allSelectedInGroup = leafValues.every((v) => selectedSet.has(v));
+    if (allSelectedInGroup) {
+      const remove = new Set(leafValues);
+      emit(selected.filter((v) => !remove.has(v)));
+    } else {
+      emit([...selected, ...leafValues.filter((v) => !selectedSet.has(v))]);
+    }
+  };
   react.useEffect(() => {
     if (!open) {
       setFocusedIndex(-1);
@@ -4558,6 +4601,10 @@ var SSelect = react.forwardRef(function SSelect2({
       handleSelectAll();
       return;
     }
+    if (focused.isGroup) {
+      handleToggleGroup(focused.leafValues ?? []);
+      return;
+    }
     handleSelect(focused.value);
   };
   const handleKeyDown = (event) => {
@@ -4721,20 +4768,20 @@ var SSelect = react.forwardRef(function SSelect2({
                       items: filtered,
                       multi,
                       selected,
-                      focusedValue: navigableItems[focusedIndex]?.isSelectAll ? "__select_all__" : navigableItems[focusedIndex]?.value,
+                      groupLeafValues,
+                      focusedValue: navigableItems[focusedIndex]?.key,
                       showSelectAll: multi && useSelectAll && allValues.length > 0,
                       selectAllLabel: allSelectedLabel,
                       selectAllSelected: allSelected,
                       onSelectAll: handleSelectAll,
                       onSelect: handleSelect,
-                      onHoverValue: (value2) => {
-                        if (value2 == null) {
+                      onToggleGroup: handleToggleGroup,
+                      onHoverValue: (key) => {
+                        if (key == null) {
                           setFocusedIndex(-1);
                           return;
                         }
-                        const index = navigableItems.findIndex(
-                          (item) => item.isSelectAll ? value2 === "__select_all__" : item.value === value2
-                        );
+                        const index = navigableItems.findIndex((item) => item.key === key);
                         if (index >= 0) setFocusedIndex(index);
                       }
                     }
@@ -4753,20 +4800,23 @@ function ItemList({
   items,
   multi,
   selected,
+  groupLeafValues,
   focusedValue,
   showSelectAll,
   selectAllLabel,
   selectAllSelected,
   onSelectAll,
   onSelect,
+  onToggleGroup,
   onHoverValue
 }) {
+  const selectedSet = react.useMemo(() => new Set(selected), [selected]);
   const itemBase = cn(
     "group flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
     "text-[color:var(--cmp-listItem-content-default)]",
     "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
   );
-  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus:bg-[var(--cmp-listItem-bg-hover)] focus:text-[color:var(--cmp-listItem-content-hover)]";
+  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus-visible:bg-[var(--cmp-listItem-bg-hover)] focus-visible:text-[color:var(--cmp-listItem-content-hover)]";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
     showSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -4783,23 +4833,7 @@ function ItemList({
         onMouseLeave: () => onHoverValue(null),
         onClick: onSelectAll,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                selectAllSelected ? focusedValue === "__select_all__" ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
-              ),
-              children: selectAllSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                SIcon,
-                {
-                  name: "checkboxCheck",
-                  size: 12,
-                  color: "var(--cmp-checkbox-checked-icon-default)"
-                }
-              )
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: selectAllSelected, focused: focusedValue === "__select_all__" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
       }
@@ -4809,12 +4843,71 @@ function ItemList({
       const rowKey = `${o.value}-${idx}`;
       if (o.isGroup) {
         const isDepth1 = o.depth === 1;
+        const groupTone = isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium";
+        if (multi) {
+          const leafValues = groupLeafValues.get(idx) ?? [];
+          const total = leafValues.length;
+          const selectedCount = leafValues.reduce((n, v) => selectedSet.has(v) ? n + 1 : n, 0);
+          const groupState = total === 0 || selectedCount === 0 ? false : selectedCount === total ? true : null;
+          const groupDisabled = o.disabled || total === 0;
+          const groupFocused = focusedValue === `__group_${idx}__`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": groupState === true,
+              disabled: groupDisabled,
+              "data-select-focused": groupFocused ? "true" : void 0,
+              "data-select-active": groupFocused ? "true" : void 0,
+              className: cn(
+                "flex w-full select-none items-center gap-[8px] border-none py-[4px] pr-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+                groupTone,
+                groupDisabled ? "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]" : "cursor-pointer",
+                groupDisabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]",
+                // 포커스 하이라이트는 depth 배경보다 뒤에 둬 tailwind-merge 로 이기게 한다.
+                groupFocused && !groupDisabled && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+              ),
+              style: { paddingLeft: padLeft },
+              onMouseEnter: () => onHoverValue(`__group_${idx}__`),
+              onMouseLeave: () => onHoverValue(null),
+              onClick: () => onToggleGroup(leafValues),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CheckboxBox, { state: groupState, disabled: groupDisabled, focused: groupFocused }),
+                isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "min-w-0 truncate",
+                    dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: o.label }),
+                total > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 font-medium",
+                      groupFocused ? "text-white" : "text-[color:var(--cmp-listItem-content-disabled)]"
+                    ),
+                    children: [
+                      "(",
+                      selectedCount,
+                      "/",
+                      total,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            },
+            rowKey
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
               "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-              isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+              groupTone,
               // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
               // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
               o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
@@ -4850,25 +4943,11 @@ function ItemList({
           onClick: () => onSelect(o.value),
           children: [
             multi && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
+              CheckboxBox,
               {
-                className: cn(
-                  "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                  o.disabled ? (
-                    // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                    "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
-                  ) : cn(
-                    isSelected ? focusedValue === o.value ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
-                  )
-                ),
-                children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                  SIcon,
-                  {
-                    name: "checkboxCheck",
-                    size: 12,
-                    color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
-                  }
-                )
+                state: isSelected,
+                disabled: o.disabled,
+                focused: focusedValue === o.value
               }
             ),
             isHtmlLabel(o.label) ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -4885,6 +4964,33 @@ function ItemList({
     })
   ] });
 }
+function CheckboxBox({
+  state,
+  disabled = false,
+  focused = false
+}) {
+  const filled = state === true || state === null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+        disabled ? (
+          // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+          "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+        ) : filled ? focused ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+      ),
+      children: filled && /* @__PURE__ */ jsxRuntime.jsx(
+        SIcon,
+        {
+          name: state === null ? "checkboxIndeterminate" : "checkboxCheck",
+          size: 12,
+          color: disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+        }
+      )
+    }
+  );
+}
 function SRadio({
   val,
   value,