@idds/react 1.3.5 → 1.4.3

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect, forwardRef, createElement, Fragment as Fragment$1, useId, useImperativeHandle } from "react";
+import React, { createContext, useRef, useState, useCallback, useMemo, useContext, useId, useEffect, forwardRef, createElement, Fragment as Fragment$1, useImperativeHandle } from "react";
 import { createPortal } from "react-dom";
 const iddsColorTokens = {
   // Neutral Colors
@@ -645,9 +645,8 @@ function Accordion(props) {
   } = props;
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const accordionGroup = useAccordionGroup();
-  const itemIdRef = useRef(
-    `accordion-${Math.random().toString(36).substr(2, 9)}`
-  );
+  const generatedId = useId().replace(/:/g, "-");
+  const itemIdRef = useRef(`accordion-${generatedId}`);
   const [itemIndex, setItemIndex] = useState(-1);
   const defaultOpenRef = useRef(defaultOpen);
   defaultOpenRef.current = defaultOpen;
@@ -2096,6 +2095,7 @@ function TextField({
         "input",
         {
           ...rest,
+          id: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
           type: rest.type ?? "text",
           className: clsx("ina-text-field__input", className),
           value: inner,
@@ -2839,13 +2839,13 @@ function FileUpload({
                 uploadedFile.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--uploading", children: /* @__PURE__ */ jsx(
                   IconLoader2,
                   {
-                    size: 16,
+                    size: 20,
                     className: "ina-file-upload__file-icon--spinning"
                   }
                 ) }),
-                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) }),
-                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconCircleX, { size: 16, stroke: "2" }) }),
-                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 16, stroke: "2" }) })
+                uploadedFile.status === "success" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 20, stroke: "2" }) }),
+                uploadedFile.status === "error" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--error", children: /* @__PURE__ */ jsx(IconCircleX, { size: 20, stroke: "2" }) }),
+                uploadedFile.status === "idle" && /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-icon-wrapper ina-file-upload__file-icon-wrapper--success", children: /* @__PURE__ */ jsx(IconCircleCheck, { size: 20, stroke: "2" }) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ina-file-upload__file-info", children: [
                 /* @__PURE__ */ jsx("div", { className: "ina-file-upload__file-name", children: sanitizeFileName(uploadedFile.file.name) }),
@@ -2863,7 +2863,7 @@ function FileUpload({
                         updateFileStatus(originalIndex, "idle");
                       },
                       title: "Coba lagi",
-                      children: /* @__PURE__ */ jsx(IconRotateClockwise, { size: 16 })
+                      children: /* @__PURE__ */ jsx(IconRotateClockwise, { size: 20 })
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -2873,7 +2873,7 @@ function FileUpload({
                       className: "ina-file-upload__file-remove",
                       onClick: () => removeFile(originalIndex),
                       title: "Hapus file",
-                      children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                      children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                     }
                   )
                 ] }),
@@ -2884,7 +2884,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Batalkan upload",
-                    children: /* @__PURE__ */ jsx(IconX, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconX, { size: 20 })
                   }
                 ),
                 uploadedFile.status === "success" && /* @__PURE__ */ jsx(
@@ -2894,7 +2894,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Hapus file",
-                    children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                   }
                 ),
                 uploadedFile.status === "idle" && /* @__PURE__ */ jsx(
@@ -2904,7 +2904,7 @@ function FileUpload({
                     className: "ina-file-upload__file-remove",
                     onClick: () => removeFile(originalIndex),
                     title: "Hapus file",
-                    children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+                    children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
                   }
                 )
               ] })
@@ -3261,7 +3261,7 @@ function SingleFileUpload({
                   handleRemove();
                 },
                 "aria-label": "Remove file",
-                children: /* @__PURE__ */ jsx(IconTrash, { size: 20 })
+                children: /* @__PURE__ */ jsx(IconTrash, { size: 18 })
               }
             )
           ] })
@@ -3294,10 +3294,18 @@ function FieldInputTable({
   const containerClasses = clsx("ina-field-input-table", className);
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
     /* @__PURE__ */ jsxs("div", { className: "ina-field-input-table__wrapper", children: [
-      /* @__PURE__ */ jsx("label", { className: "ina-field-input-table__label", children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "ina-field-input-table__label",
+          htmlFor: "field-input-table-input",
+          children: placeholder
+        }
+      ),
       /* @__PURE__ */ jsx(
         "input",
         {
+          id: "field-input-table-input",
           type: "text",
           className: "ina-field-input-table__input",
           value,
@@ -4154,13 +4162,15 @@ function SelectDropdown({
   onSearchChange,
   disabled = false,
   showPreviewValue = true,
-  searchable = true
+  searchable = true,
+  onSelectedRawChange
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [internalSearchTerm, setInternalSearchTerm] = useState("");
   const containerRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const searchTimeoutRef = useRef(null);
+  const selectedLabelsCacheRef = useRef(/* @__PURE__ */ new Map());
   const isSearchControlled = searchValue !== void 0;
   const searchTerm = isSearchControlled ? searchValue : internalSearchTerm;
   useEffect(() => {
@@ -4218,16 +4228,88 @@ function SelectDropdown({
   const isArraySelected = multiple && Array.isArray(selected);
   const selectedArray = isArraySelected ? selected : [];
   const singleSelected = !multiple ? selected : null;
+  const getLabelForValue = (value) => {
+    if (selectedLabelsCacheRef.current.has(value)) {
+      return selectedLabelsCacheRef.current.get(value) || null;
+    }
+    const found = options.find((o) => o.value === value);
+    if (found) {
+      selectedLabelsCacheRef.current.set(value, found.label);
+      return found.label;
+    }
+    return null;
+  };
+  const getOptionForValue = (value) => {
+    const label = getLabelForValue(value);
+    if (label !== null) {
+      return { label, value };
+    }
+    const found = options.find((o) => o.value === value);
+    return found || null;
+  };
+  useEffect(() => {
+    if (onSelectedRawChange) {
+      let selectedRaw = null;
+      if (multiple) {
+        if (selectedArray.length > 0) {
+          const rawOptions = selectedArray.map((val) => getOptionForValue(val)).filter((opt) => opt !== null);
+          selectedRaw = rawOptions.length > 0 ? rawOptions : null;
+        }
+      } else {
+        if (singleSelected !== null && singleSelected !== void 0 && singleSelected !== "") {
+          selectedRaw = getOptionForValue(singleSelected);
+        }
+      }
+      onSelectedRawChange(selectedRaw);
+    }
+  }, [selected, multiple, options]);
+  useEffect(() => {
+    const cache = selectedLabelsCacheRef.current;
+    options.forEach((option) => {
+      if (cache.has(option.value)) {
+        cache.set(option.value, option.label);
+      }
+    });
+  }, [options]);
+  useEffect(() => {
+    const cache = selectedLabelsCacheRef.current;
+    if (multiple && Array.isArray(selected)) {
+      selected.forEach((value) => {
+        if (!cache.has(value)) {
+          const found = options.find((o) => o.value === value);
+          if (found) {
+            cache.set(value, found.label);
+          }
+        }
+      });
+      cache.forEach((_, value) => {
+        if (!selected.includes(value)) {
+          cache.delete(value);
+        }
+      });
+    } else if (selected !== null && selected !== void 0 && selected !== "") {
+      if (!cache.has(selected)) {
+        const found = options.find((o) => o.value === selected);
+        if (found) {
+          cache.set(selected, found.label);
+        }
+      }
+    } else {
+      cache.clear();
+    }
+  }, [selected, multiple, options]);
   let triggerLabel;
   if (multiple) {
     if (!selectedArray.length) triggerLabel = placeholder;
     else if (selectedArray.length > 3)
       triggerLabel = `${selectedArray.length} data terpilih`;
-    else
-      triggerLabel = options.filter((o) => selectedArray.includes(o.value)).map((o) => o.label).join(", ");
+    else {
+      const labels = selectedArray.map((val) => getLabelForValue(val)).filter((label) => label !== null);
+      triggerLabel = labels.length > 0 ? labels.join(", ") : placeholder;
+    }
   } else {
-    const found = options.find((o) => o.value === singleSelected);
-    triggerLabel = found ? found.label : placeholder;
+    const label = getLabelForValue(singleSelected);
+    triggerLabel = label || placeholder;
   }
   const filteredOptions = onSearch ? options : !searchable ? options : options.filter(
     (o) => o.label.toLowerCase().includes(searchTerm.toLowerCase())
@@ -4241,6 +4323,7 @@ function SelectDropdown({
     }
   };
   const handleRemoveSelected = (value) => {
+    selectedLabelsCacheRef.current.delete(value);
     if (onRemoveSelected) {
       onRemoveSelected(value);
     } else {
@@ -4260,13 +4343,14 @@ function SelectDropdown({
     if (multiple && selectedArray.length > 0) {
       return /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__preview-content", children: [
         selectedArray.slice(0, 3).map((value, index) => {
-          const option = options.find((o) => o.value === value);
+          const label = getLabelForValue(value);
+          const displayLabel = label || value;
           return /* @__PURE__ */ jsxs(
             "div",
             {
               className: "ina-select-dropdown__preview-item ina-select-dropdown__preview-item--multiple",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: (option == null ? void 0 : option.label) || value }),
+                /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: displayLabel }),
                 !disabled && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -4276,7 +4360,7 @@ function SelectDropdown({
                       handleRemoveSelected(value);
                     },
                     className: "ina-select-dropdown__preview-remove ina-select-dropdown__preview-remove--multiple",
-                    "aria-label": `Remove ${(option == null ? void 0 : option.label) || value}`,
+                    "aria-label": `Remove ${displayLabel}`,
                     disabled,
                     children: /* @__PURE__ */ jsx(IconX, { size: 12 })
                   }
@@ -4294,9 +4378,10 @@ function SelectDropdown({
       ] });
     }
     if (!multiple && singleSelected !== null && singleSelected !== void 0 && singleSelected !== "") {
-      const option = options.find((o) => o.value === singleSelected);
+      const label = getLabelForValue(singleSelected);
+      const displayLabel = label || singleSelected;
       return /* @__PURE__ */ jsx("div", { className: "ina-select-dropdown__preview-content", children: /* @__PURE__ */ jsxs("div", { className: "ina-select-dropdown__preview-item ina-select-dropdown__preview-item--single", children: [
-        /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: (option == null ? void 0 : option.label) || singleSelected }),
+        /* @__PURE__ */ jsx("span", { className: "ina-select-dropdown__preview-item-text", children: displayLabel }),
         !disabled && /* @__PURE__ */ jsx(
           "button",
           {
@@ -4306,7 +4391,7 @@ function SelectDropdown({
               handleRemoveSelected(singleSelected);
             },
             className: "ina-select-dropdown__preview-remove ina-select-dropdown__preview-remove--single",
-            "aria-label": `Remove ${(option == null ? void 0 : option.label) || singleSelected}`,
+            "aria-label": `Remove ${displayLabel}`,
             disabled,
             children: /* @__PURE__ */ jsx(IconX, { size: 12 })
           }
@@ -4440,11 +4525,27 @@ function SelectDropdown({
                         if (disabled) return;
                         if (multiple) {
                           const prev = Array.isArray(selected) ? [...selected] : [];
-                          onSelect(
-                            prev.includes(option.value) ? prev.filter((v) => v !== option.value) : [...prev, option.value]
-                          );
+                          const newSelected = prev.includes(option.value) ? prev.filter((v) => v !== option.value) : [...prev, option.value];
+                          if (prev.includes(option.value)) {
+                            selectedLabelsCacheRef.current.delete(option.value);
+                          } else {
+                            selectedLabelsCacheRef.current.set(
+                              option.value,
+                              option.label
+                            );
+                          }
+                          onSelect(newSelected);
                         } else {
-                          onSelect(isSelected ? null : option.value, option);
+                          if (isSelected) {
+                            selectedLabelsCacheRef.current.delete(option.value);
+                            onSelect(null, option);
+                          } else {
+                            selectedLabelsCacheRef.current.set(
+                              option.value,
+                              option.label
+                            );
+                            onSelect(option.value, option);
+                          }
                           setIsOpen(false);
                           if (isSearchControlled) {
                             onSearchChange == null ? void 0 : onSearchChange("");
@@ -4520,7 +4621,8 @@ function Drawer({
   if (!isOpen || !mounted) return null;
   const containerClasses = clsx(
     "ina-drawer",
-    `ina-drawer--position-${position}`
+    `ina-drawer--position-${position}`,
+    className
   );
   const panelClasses = clsx(
     "ina-drawer__panel",
@@ -4579,7 +4681,7 @@ function Drawer({
           "div",
           {
             onClick: (e) => e.stopPropagation(),
-            className: clsx(panelClasses, className),
+            className: panelClasses,
             style: panelStyle,
             children: [
               position !== "top" && /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [
@@ -5168,13 +5270,21 @@ function TextArea({
   );
   const bottomText = status !== "neutral" && statusMessage != null ? statusMessage : helperText;
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "ina-text-area__label", children: label }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: "ina-text-area__label",
+        htmlFor: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
       prefixIcon && /* @__PURE__ */ jsx("div", { className: "ina-text-area__prefix-icon", children: prefixIcon }),
       /* @__PURE__ */ jsx(
         "textarea",
         {
           ...rest,
+          id: (rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name) ? String((rest == null ? void 0 : rest.id) || (rest == null ? void 0 : rest.name)) : String(label).toLowerCase(),
           ref: taRef,
           rows,
           className: "ina-text-area__input",
@@ -8128,52 +8238,42 @@ function YearPicker({
   useEffect(() => {
     if (isOpen && triggerRef.current) {
       const calculatePosition = () => {
+        var _a;
         if (!triggerRef.current || !panelRef.current) return;
         const triggerRect = triggerRef.current.getBoundingClientRect();
         const panelRect = panelRef.current.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
-        const defaultPanelWidth = 320;
+        const isMobile = viewportWidth <= 640;
+        const defaultPanelWidth = isMobile ? 200 : 320;
         const panelWidthValue = panelRect.width || defaultPanelWidth;
         const availableSpaceRight = viewportWidth - triggerRect.right;
-        const isMobile = viewportWidth <= 640;
         let left = void 0;
         let right = void 0;
         let shouldUseRight = false;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            right = viewportWidth - triggerRect.right;
-            left = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            left = triggerRect.left;
-            right = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              left = 0;
-              right = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              right = 0;
-              left = void 0;
-            } else {
-              left = panelLeft;
-              right = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          if (containerRect) {
+            let calculatedLeft = panelLeftFromViewport - containerRect.left;
+            if (calculatedLeft < 0) {
+              calculatedLeft = 0;
             }
+            const panelRightInViewport = containerRect.left + calculatedLeft + panelWidthValue;
+            if (panelRightInViewport > viewportWidth) {
+              calculatedLeft = viewportWidth - panelWidthValue - containerRect.left;
+              if (calculatedLeft < 0) {
+                calculatedLeft = 0;
+              }
+            }
+            left = calculatedLeft;
+            right = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              right = viewportWidth - triggerRect.right;
-              left = void 0;
-            } else {
-              left = triggerRect.left;
-              right = void 0;
-            }
+            left = Math.max(0, panelLeftFromViewport);
+            right = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -8483,6 +8583,7 @@ function MonthPicker({
   useEffect(() => {
     if (isOpen && triggerRef.current) {
       const calculatePosition = () => {
+        var _a;
         if (!triggerRef.current || !panelRef.current) return;
         const triggerRect = triggerRef.current.getBoundingClientRect();
         const panelRect = panelRef.current.getBoundingClientRect();
@@ -8496,39 +8597,28 @@ function MonthPicker({
         let right = void 0;
         let shouldUseRight = false;
         if (isMobile) {
-          const threshold = 16;
-          const triggerCenter = triggerRect.left + triggerRect.width / 2;
-          const viewportCenter = viewportWidth / 2;
-          if (triggerRect.right > viewportWidth - threshold) {
-            shouldUseRight = true;
-            right = viewportWidth - triggerRect.right;
-            left = void 0;
-          } else if (triggerRect.left < threshold) {
-            shouldUseRight = false;
-            left = triggerRect.left;
-            right = void 0;
-          } else if (Math.abs(triggerCenter - viewportCenter) < panelWidthValue / 2) {
-            const panelLeft = triggerRect.left - (panelWidthValue - triggerRect.width) / 2;
-            if (panelLeft < 0) {
-              left = 0;
-              right = void 0;
-            } else if (panelLeft + panelWidthValue > viewportWidth) {
-              right = 0;
-              left = void 0;
-            } else {
-              left = panelLeft;
-              right = void 0;
+          const panelCenterX = viewportWidth / 2;
+          const panelLeftFromViewport = panelCenterX - panelWidthValue / 2;
+          const containerRect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          if (containerRect) {
+            let calculatedLeft = panelLeftFromViewport - containerRect.left;
+            if (calculatedLeft < 0) {
+              calculatedLeft = 0;
             }
+            const panelRightInViewport = containerRect.left + calculatedLeft + panelWidthValue;
+            if (panelRightInViewport > viewportWidth) {
+              calculatedLeft = viewportWidth - panelWidthValue - containerRect.left;
+              if (calculatedLeft < 0) {
+                calculatedLeft = 0;
+              }
+            }
+            left = calculatedLeft;
+            right = void 0;
             shouldUseRight = false;
           } else {
-            shouldUseRight = panelWidthValue > availableSpaceRight;
-            if (shouldUseRight) {
-              right = viewportWidth - triggerRect.right;
-              left = void 0;
-            } else {
-              left = triggerRect.left;
-              right = void 0;
-            }
+            left = Math.max(0, panelLeftFromViewport);
+            right = void 0;
+            shouldUseRight = false;
           }
         } else {
           shouldUseRight = panelWidthValue > availableSpaceRight;
@@ -8793,7 +8883,7 @@ function DatePicker({
   popperPlacement = "bottom-start",
   dateFormat = "dd/MM/yyyy",
   className = "",
-  triggerWidth = "100%",
+  triggerWidth = "",
   panelMaxHeight,
   panelClassName = "",
   triggerClassname = "",
@@ -9793,22 +9883,30 @@ function MultipleChoiceGrid({
         "div",
         {
           className: "ina-multiple-choice-grid__cell",
-          children: /* @__PURE__ */ jsxs("label", { className: "ina-multiple-choice-grid__radio-label", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "radio",
-                name: `${name}-${row.id}`,
-                value: column.id,
-                checked: isSelected(row.id, column.id),
-                onChange: handleRadioChange,
-                disabled,
-                className: "ina-multiple-choice-grid__radio-input",
-                "aria-label": `${row.label} ${column.label}`
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ina-multiple-choice-grid__radio-custom" })
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "ina-multiple-choice-grid__radio-label",
+              htmlFor: `${name}-${row.id}-${column.id}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: `${name}-${row.id}-${column.id}`,
+                    type: "radio",
+                    name: `${name}-${row.id}`,
+                    value: column.id,
+                    checked: isSelected(row.id, column.id),
+                    onChange: handleRadioChange,
+                    disabled,
+                    className: "ina-multiple-choice-grid__radio-input",
+                    "aria-label": `${row.label} ${column.label}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ina-multiple-choice-grid__radio-custom" })
+              ]
+            }
+          )
         },
         `${row.id}-${column.id}`
       ))