lecom-ui 4.3.5 → 4.3.7

package/dist/components/Notification/NotificationBase.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { notificationVariants } from './Notification.js';
 
@@ -9,16 +9,16 @@ const NotificationBase = ({
   children,
   className,
   dataTestId
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn(notificationVariants({ variant }), className),
     onMouseEnter,
     onMouseLeave,
     "data-testid": dataTestId,
-    "aria-hidden": "true",
-    children
-  }
+    "aria-hidden": "true"
+  },
+  children
 );
 
 export { NotificationBase };

package/dist/components/Notification/NotificationCallout.js

@@ -1,4 +1,3 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
@@ -48,42 +47,37 @@ const NotificationCallout = ({ ...props }) => {
     if (isCollapsed && props.title) return "max-h-0 overflow-hidden";
     return "no-collapse";
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     NotificationBase,
     {
       variant: defaultVariant,
       className: cn(getGridColumns(), isCollapsed && "place-items-center"),
-      dataTestId: "notification-callout",
-      children: [
-        /* @__PURE__ */ jsx(NotificationIcon, { variant: defaultVariant }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx(
-            NotificationContent,
-            {
-              title: props.title,
-              content: props.content,
-              ref: contentRef,
-              className: cn(
-                "transition-all duration-300",
-                isCollapsed && getCollapseClass()
-              )
-            }
-          ),
-          props.action
-        ] }),
-        /* @__PURE__ */ jsx(
-          ChevronUp,
-          {
-            "data-testid": "collapse-icon",
-            onClick: handleCollapse,
-            ref: refCollapse,
-            className: cn(
-              shouldCollapse ? "opacity-100 size-5 text-grey-800 transition-transform duration-200 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
-            )
-          }
+      dataTestId: "notification-callout"
+    },
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
+      NotificationContent,
+      {
+        title: props.title,
+        content: props.content,
+        ref: contentRef,
+        className: cn(
+          "transition-all duration-300",
+          isCollapsed && getCollapseClass()
         )
-      ]
-    }
+      }
+    ), props.action),
+    /* @__PURE__ */ React.createElement(
+      ChevronUp,
+      {
+        "data-testid": "collapse-icon",
+        onClick: handleCollapse,
+        ref: refCollapse,
+        className: cn(
+          shouldCollapse ? "opacity-100 size-5 text-grey-800 transition-transform duration-200 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
+        )
+      }
+    )
   );
 };
 NotificationCallout.displayName = "NotificationCallout";

package/dist/components/Notification/NotificationCloseButton.js

@@ -1,11 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
 import { cn } from '../../lib/utils.js';
 import X from '../../node_modules/lucide-react/dist/esm/icons/x.js';
 
 const NotificationCloseButton = ({
   onClose,
   enableClose
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   X,
   {
     className: cn(

package/dist/components/Notification/NotificationContent.js

@@ -1,30 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Typography } from '../Typography/Typography.js';
 
-const NotificationContent = React.forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
-  title && /* @__PURE__ */ jsx(
-    Typography,
-    {
-      variant: "body-medium-500",
-      color: "grey-800",
-      "data-testid": "title",
-      children: title
-    }
-  ),
-  /* @__PURE__ */ jsx("div", { ref, className, "data-testid": "collapse-content", children: /* @__PURE__ */ jsxs(
-    Typography,
-    {
-      variant: "body-medium-400",
-      color: "grey-800",
-      "data-testid": "content",
-      children: [
-        content,
-        children
-      ]
-    }
-  ) })
-] }));
+const NotificationContent = React.forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 flex-1" }, title && /* @__PURE__ */ React.createElement(
+  Typography,
+  {
+    variant: "body-medium-500",
+    color: "grey-800",
+    "data-testid": "title"
+  },
+  title
+), /* @__PURE__ */ React.createElement("div", { ref, className, "data-testid": "collapse-content" }, /* @__PURE__ */ React.createElement(
+  Typography,
+  {
+    variant: "body-medium-400",
+    color: "grey-800",
+    "data-testid": "content"
+  },
+  content,
+  children
+))));
 NotificationContent.displayName = "NotificationContent";
 
 export { NotificationContent };

package/dist/components/Notification/NotificationIcon.js

@@ -1,14 +1,14 @@
-import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
 import TriangleAlert from '../../node_modules/lucide-react/dist/esm/icons/triangle-alert.js';
 import Info from '../../node_modules/lucide-react/dist/esm/icons/info.js';
 import CircleAlert from '../../node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import CircleCheck from '../../node_modules/lucide-react/dist/esm/icons/circle-check.js';
 
 const iconMap = {
-  success: /* @__PURE__ */ jsx(CircleCheck, { className: "text-green-600 size-5" }),
-  error: /* @__PURE__ */ jsx(CircleAlert, { className: "text-red-600 size-5" }),
-  information: /* @__PURE__ */ jsx(Info, { className: "text-blue-600 size-5" }),
-  warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5 text-yellow-600" })
+  success: /* @__PURE__ */ React.createElement(CircleCheck, { className: "text-green-600 size-5" }),
+  error: /* @__PURE__ */ React.createElement(CircleAlert, { className: "text-red-600 size-5" }),
+  information: /* @__PURE__ */ React.createElement(Info, { className: "text-blue-600 size-5" }),
+  warning: /* @__PURE__ */ React.createElement(TriangleAlert, { className: "size-5 text-yellow-600" })
 };
 const NotificationIcon = ({
   variant

package/dist/components/Notification/NotificationInline.js

@@ -1,4 +1,3 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
@@ -46,32 +45,30 @@ const NotificationInline = ({
       return getNonFullWidthColumns();
     }
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     NotificationBase,
     {
       variant: defaultVariant,
       className: cn(getGridColumns()),
-      dataTestId: "notification-inline",
-      children: [
-        /* @__PURE__ */ jsx(NotificationIcon, { variant: defaultVariant }),
-        /* @__PURE__ */ jsx(
-          NotificationContent,
-          {
-            title,
-            content,
-            className: "max-h-11 overflow-hidden"
-          }
-        ),
-        action,
-        /* @__PURE__ */ jsx(
-          NotificationCloseButton,
-          {
-            enableClose: enableClose ?? false,
-            onClose: () => setIsVisible(false)
-          }
-        )
-      ]
-    }
+      dataTestId: "notification-inline"
+    },
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
+    /* @__PURE__ */ React.createElement(
+      NotificationContent,
+      {
+        title,
+        content,
+        className: "max-h-11 overflow-hidden"
+      }
+    ),
+    action,
+    /* @__PURE__ */ React.createElement(
+      NotificationCloseButton,
+      {
+        enableClose: enableClose ?? false,
+        onClose: () => setIsVisible(false)
+      }
+    )
   );
 };
 NotificationInline.displayName = "NotificationInline";

package/dist/components/Notification/NotificationToast.js

@@ -1,4 +1,3 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { NotificationBase } from './NotificationBase.js';
@@ -108,13 +107,14 @@ const NotificationToast = (props) => {
   );
   const renderAction = (action) => {
     if (action) {
-      return /* @__PURE__ */ jsx("div", { className: cn(props.showProgress ? "py-2" : "pt-2"), children: action });
+      return /* @__PURE__ */ React.createElement("div", { className: cn(props.showProgress ? "py-2" : "pt-2") }, action);
     }
     return null;
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: toasts.map((toast) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, toasts.map((toast) => /* @__PURE__ */ React.createElement(
     NotificationBase,
     {
+      key: toast.id,
       variant: toast.variant,
       className: cn(
         "sm:w-[17.5rem] min-w-auto cursor-pointer",
@@ -122,32 +122,29 @@ const NotificationToast = (props) => {
       ),
       onMouseEnter: () => handleMouseEnter(toast.id),
       onMouseLeave: () => handleMouseLeave(toast.id),
-      dataTestId: "notification-toast",
-      children: [
-        /* @__PURE__ */ jsx(NotificationIcon, { variant: toast.variant }),
-        /* @__PURE__ */ jsx(NotificationContent, { title: toast.title, content: toast.content, children: renderAction(toast.action) }),
-        /* @__PURE__ */ jsx(
-          NotificationCloseButton,
-          {
-            enableClose: props.enableClose ?? false,
-            onClose: () => closeNotification(toast.id)
-          }
-        ),
-        props.showProgress && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-testid": "progress-bar",
-            className: cn(
-              `absolute bottom-0 left-0 h-1 rounded-b-lg transition-all`,
-              colorMap[toast.variant]
-            ),
-            style: { width: `${progressMap[toast.id] ?? 100}%` }
-          }
-        )
-      ]
+      dataTestId: "notification-toast"
     },
-    toast.id
-  )) });
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: toast.variant }),
+    /* @__PURE__ */ React.createElement(NotificationContent, { title: toast.title, content: toast.content }, renderAction(toast.action)),
+    /* @__PURE__ */ React.createElement(
+      NotificationCloseButton,
+      {
+        enableClose: props.enableClose ?? false,
+        onClose: () => closeNotification(toast.id)
+      }
+    ),
+    props.showProgress && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "progress-bar",
+        className: cn(
+          `absolute bottom-0 left-0 h-1 rounded-b-lg transition-all`,
+          colorMap[toast.variant]
+        ),
+        style: { width: `${progressMap[toast.id] ?? 100}%` }
+      }
+    )
+  )));
 };
 NotificationToast.displayName = "NotificationToast";
 const MemoizedNotificationToast = React.memo(NotificationToast);

package/dist/components/Pagination/Pagination.js

@@ -1,4 +1,3 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Button } from '../Button/Button.js';
 import { cn } from '../../lib/utils.js';
@@ -14,7 +13,7 @@ import ChevronFirst from '../../node_modules/lucide-react/dist/esm/icons/chevron
 import ChevronLast from '../../node_modules/lucide-react/dist/esm/icons/chevron-last.js';
 
 initializeI18n();
-const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   "ul",
   {
     ref,
@@ -23,14 +22,14 @@ const PaginationContent = React.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+const PaginationItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("li", { ref, className: cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 const PaginationFirst = ({
   className,
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   Button,
   {
     disabled,
@@ -39,9 +38,9 @@ const PaginationFirst = ({
     color: "grey",
     size: "small",
     onClick,
-    className: cn(isActive && "bg-white", className),
-    children: /* @__PURE__ */ jsx(ChevronFirst, { size: 20 })
-  }
+    className: cn(isActive && "bg-white", className)
+  },
+  /* @__PURE__ */ React.createElement(ChevronFirst, { size: 20 })
 );
 PaginationFirst.displayName = "PaginationFirst";
 const PaginationLast = ({
@@ -49,7 +48,7 @@ const PaginationLast = ({
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   Button,
   {
     disabled,
@@ -58,9 +57,9 @@ const PaginationLast = ({
     color: "grey",
     size: "small",
     onClick,
-    className: cn(isActive && "bg-white", className),
-    children: /* @__PURE__ */ jsx(ChevronLast, { size: 20 })
-  }
+    className: cn(isActive && "bg-white", className)
+  },
+  /* @__PURE__ */ React.createElement(ChevronLast, { size: 20 })
 );
 PaginationLast.displayName = "PaginationLast";
 const PaginationPrevious = ({
@@ -68,7 +67,7 @@ const PaginationPrevious = ({
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   Button,
   {
     disabled,
@@ -77,9 +76,9 @@ const PaginationPrevious = ({
     color: "grey",
     size: "small",
     onClick,
-    className: cn(isActive && "bg-white", className),
-    children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 })
-  }
+    className: cn(isActive && "bg-white", className)
+  },
+  /* @__PURE__ */ React.createElement(ChevronLeft, { size: 20 })
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 const PaginationNext = ({
@@ -87,7 +86,7 @@ const PaginationNext = ({
   disabled,
   isActive,
   onClick
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   Button,
   {
     disabled,
@@ -96,9 +95,9 @@ const PaginationNext = ({
     color: "grey",
     size: "small",
     onClick,
-    className: cn(isActive && "bg-white", className),
-    children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 })
-  }
+    className: cn(isActive && "bg-white", className)
+  },
+  /* @__PURE__ */ React.createElement(ChevronRight, { size: 20 })
 );
 PaginationNext.displayName = "PaginationNext";
 const PaginationEllipsis = ({
@@ -109,9 +108,9 @@ const PaginationEllipsis = ({
   onClick
 }) => {
   if (asChild) {
-    return /* @__PURE__ */ jsx("div", { className: "w-8 h-8 flex items-center justify-center", children: /* @__PURE__ */ jsx(Ellipsis, { size: 20, className: "text-grey-800" }) });
+    return /* @__PURE__ */ React.createElement("div", { className: "w-8 h-8 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Ellipsis, { size: 20, className: "text-grey-800" }));
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     Button,
     {
       disabled,
@@ -120,9 +119,9 @@ const PaginationEllipsis = ({
       color: "grey",
       size: "small",
       onClick,
-      className: cn(isActive && "bg-white", className),
-      children: /* @__PURE__ */ jsx(Ellipsis, { size: 20 })
-    }
+      className: cn(isActive && "bg-white", className)
+    },
+    /* @__PURE__ */ React.createElement(Ellipsis, { size: 20 })
   );
 };
 PaginationEllipsis.displayName = "PaginationEllipsis";
@@ -132,7 +131,7 @@ const PaginationIndex = ({
   isActive,
   onClick,
   children
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ React.createElement(
   Button,
   {
     disabled,
@@ -141,9 +140,9 @@ const PaginationIndex = ({
     color: "grey",
     size: "small",
     onClick,
-    className: cn(isActive && "bg-white", className),
-    children
-  }
+    className: cn(isActive && "bg-white", className)
+  },
+  children
 );
 PaginationIndex.displayName = "PaginationIndex";
 const Pagination = ({
@@ -174,17 +173,17 @@ const Pagination = ({
       disabled: item.disabled
     };
     if (item.type === "page") {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ React.createElement(
         PaginationIndex,
         {
           isActive: item.page === currentPage,
-          ...componentProps,
-          children: item.page
-        }
+          ...componentProps
+        },
+        item.page
       );
     }
     if (item.type.includes("ellipsis")) {
-      return /* @__PURE__ */ jsx(PaginationEllipsis, { asChild: true });
+      return /* @__PURE__ */ React.createElement(PaginationEllipsis, { asChild: true });
     }
     const mappedComponents = {
       first: PaginationFirst,
@@ -194,34 +193,16 @@ const Pagination = ({
     };
     return React.createElement(mappedComponents[item.type], componentProps);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-6 gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "small", color: "grey", variant: "outlined", children: [
-          /* @__PURE__ */ jsx("span", { className: "max-md:hidden", children: t("pagination.show") }),
-          " ",
-          perPage,
-          /* @__PURE__ */ jsx(ChevronDown, { size: 20 })
-        ] }) }),
-        /* @__PURE__ */ jsx(DropdownMenuContent, { side: "top", align: "center", children: perPageOptions.map((option) => /* @__PURE__ */ jsx(
-          DropdownMenuItem,
-          {
-            onSelect: () => {
-              onChangePerPage?.(option.value);
-            },
-            children: option.value.toString()
-          },
-          option.value
-        )) })
-      ] }),
-      totalRowsSelected > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800", children: [
-        totalRowsSelected,
-        " ",
-        t("pagination.selectedProcess")
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("nav", { role: "navigation", "aria-label": "pagination", children: /* @__PURE__ */ jsx(PaginationContent, { children: itemsPage.map((item) => /* @__PURE__ */ jsx(PaginationItem, { children: mapPaginationItem(item) }, item.id)) }) })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mt-6 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(DropdownMenu, null, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { size: "small", color: "grey", variant: "outlined" }, /* @__PURE__ */ React.createElement("span", { className: "max-md:hidden" }, t("pagination.show")), " ", perPage, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20 }))), /* @__PURE__ */ React.createElement(DropdownMenuContent, { side: "top", align: "center" }, perPageOptions.map((option) => /* @__PURE__ */ React.createElement(
+    DropdownMenuItem,
+    {
+      key: option.value,
+      onSelect: () => {
+        onChangePerPage?.(option.value);
+      }
+    },
+    option.value.toString()
+  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess"))), /* @__PURE__ */ React.createElement("nav", { role: "navigation", "aria-label": "pagination" }, /* @__PURE__ */ React.createElement(PaginationContent, null, itemsPage.map((item) => /* @__PURE__ */ React.createElement(PaginationItem, { key: item.id }, mapPaginationItem(item))))));
 };
 Pagination.displayName = "Pagination";
 

package/dist/components/Popover/Popover.js

@@ -1,11 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { Portal, Content as Content2, Root as Root2, Trigger } from '../../node_modules/@radix-ui/react-popover/dist/index.js';
 
 const Popover = Root2;
 const PopoverTrigger = Trigger;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(
   Content2,
   {
     ref,
@@ -17,7 +16,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     ),
     ...props
   }
-) }));
+)));
 PopoverContent.displayName = Content2.displayName;
 
 export { Popover, PopoverContent, PopoverTrigger };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,10 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 import { Root as Root2, Item as Item2, Indicator } from '../../node_modules/@radix-ui/react-radio-group/dist/index.js';
 import Circle from '../../node_modules/lucide-react/dist/esm/icons/circle.js';
 
-const RadioGroup = React.forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
+const RadioGroup = React.forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
   Root2,
   {
     className: cn("grid gap-2", className),
@@ -16,30 +15,27 @@ const RadioGroup = React.forwardRef(({ className, disabled, ...props }, ref) =>
 RadioGroup.displayName = Root2.displayName;
 const RadioGroupItem = React.forwardRef(({ className, children, disabled, ...props }, ref) => {
   const id = React.useId();
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-    /* @__PURE__ */ jsx(
-      Item2,
-      {
-        ref,
-        className: cn(
-          "peer relative aspect-square h-5 w-5 rounded-full border-2 border-grey-400 transition-all hover:border-grey-500 active:border-grey-700 disabled:cursor-not-allowed disabled:border-grey-300 focus-visible:outline-none focus-visible:before:absolute focus-visible:before:-z-10 focus-visible:before:top-1/2 focus-visible:before:left-1/2 focus-visible:before:transform focus-visible:before:-translate-x-1/2 focus-visible:before:-translate-y-1/2 focus-visible:before:w-10 focus-visible:before:h-10 focus-visible:before:rounded-full focus-visible:before:bg-blue-100 data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600 data-[state=checked]:hover:border-blue-700 data-[state=checked]:hover:text-blue-700 data-[state=checked]:active:border-blue-800 data-[state=checked]:active:text-blue-800 data-[state=checked]:disabled:border-blue-400 data-[state=checked]:disabled:text-blue-400",
-          className
-        ),
-        disabled,
-        ...props,
-        id,
-        children: /* @__PURE__ */ jsx(Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: id,
-        className: "body-medium-400 leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-opacity",
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-2" }, /* @__PURE__ */ React.createElement(
+    Item2,
+    {
+      ref,
+      className: cn(
+        "peer relative aspect-square h-5 w-5 rounded-full border-2 border-grey-400 transition-all hover:border-grey-500 active:border-grey-700 disabled:cursor-not-allowed disabled:border-grey-300 focus-visible:outline-none focus-visible:before:absolute focus-visible:before:-z-10 focus-visible:before:top-1/2 focus-visible:before:left-1/2 focus-visible:before:transform focus-visible:before:-translate-x-1/2 focus-visible:before:-translate-y-1/2 focus-visible:before:w-10 focus-visible:before:h-10 focus-visible:before:rounded-full focus-visible:before:bg-blue-100 data-[state=checked]:border-blue-600 data-[state=checked]:text-blue-600 data-[state=checked]:hover:border-blue-700 data-[state=checked]:hover:text-blue-700 data-[state=checked]:active:border-blue-800 data-[state=checked]:active:text-blue-800 data-[state=checked]:disabled:border-blue-400 data-[state=checked]:disabled:text-blue-400",
+        className
+      ),
+      disabled,
+      ...props,
+      id
+    },
+    /* @__PURE__ */ React.createElement(Indicator, { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }))
+  ), /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: id,
+      className: "body-medium-400 leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-opacity"
+    },
+    children
+  ));
 });
 RadioGroupItem.displayName = Item2.displayName;