lecom-ui 4.1.9 → 4.2.0

package/dist/components/Header/HelpMenu.js

@@ -1,11 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { cn } from '../../lib/utils.js';
-import { HelpCircle } from 'lucide-react';
-import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
+import CircleHelp from '../../node_modules/lucide-react/dist/esm/icons/circle-help.js';
 
 const Item = ({
   description,
@@ -23,17 +24,19 @@ const Item = ({
     }
     onClick?.();
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       onClick: handleClickItem,
       className: cn(
         "flex gap-4 items-center justify-center p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300",
         !!disabled && "opacity-50 hover:cursor-not-allowed"
-      )
-    },
-    icon && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center [&>svg]:!w-5 [&>svg]:!h-5" }, icon),
-    description && /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("span", { className: "body-large-400" }, description))
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center [&>svg]:!w-5 [&>svg]:!h-5", children: icon }),
+        description && /* @__PURE__ */ jsx("div", { className: "grow", children: /* @__PURE__ */ jsx("span", { className: "body-large-400", children: description }) })
+      ]
+    }
   );
 };
 const HelpMenu = ({
@@ -47,40 +50,48 @@ const HelpMenu = ({
   if (!title && !items) {
     return null;
   }
-  const renderButtonTrigger = () => /* @__PURE__ */ React.createElement(Tooltip, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      iconButton: true,
-      customStyles,
-      className: "flex-shrink-0 max-md:hidden",
-      isActive: isOpen
-    },
-    /* @__PURE__ */ React.createElement(HelpCircle, null)
-  ))), /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(
-    TooltipContent,
-    {
-      color: "black",
-      align: "center",
-      side: "bottom",
-      hidden: isOpen
-    },
-    t("header.help")
-  )));
-  return /* @__PURE__ */ React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen }, renderButtonTrigger(), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side: "bottom",
-      align: "end",
-      className: "w-[200x] p-2",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
+  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        iconButton: true,
+        customStyles,
+        className: "max-md:hidden",
+        isActive: isOpen,
+        children: /* @__PURE__ */ jsx(CircleHelp, {})
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        color: "black",
+        align: "center",
+        side: "bottom",
+        hidden: isOpen,
+        children: t("header.help")
+      }
+    )
+  ] }) });
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    renderButtonTrigger(),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        className: "w-[200x] p-2",
+        sideOffset: 16,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: [
+          title && /* @__PURE__ */ jsx("span", { className: "body-large-400 p-2 block", children: title }),
+          /* @__PURE__ */ jsx(ScrollArea, { style: { height: scrollAreaHeight }, children: items?.map((item, i) => /* @__PURE__ */ jsx(Item, { ...item }, i)) })
+        ]
       }
-    },
-    title && /* @__PURE__ */ React.createElement("span", { className: "body-large-400 p-2 block" }, title),
-    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, items?.map((item, i) => /* @__PURE__ */ React.createElement(Item, { key: i, ...item })))
-  ));
+    )
+  ] });
 };
 HelpMenu.displayName = "HelpMenu";
 

package/dist/components/Header/ImgBrand.js

@@ -1,14 +1,11 @@
-import * as React from 'react';
-import Image from 'next/image';
+import { jsx } from 'react/jsx-runtime';
 import img from '../../public/imgs/logo-lecom.png.js';
 
-const ImgBrand = ({ src }) => /* @__PURE__ */ React.createElement(
-  Image,
+const ImgBrand = ({ src }) => /* @__PURE__ */ jsx(
+  "img",
   {
-    unoptimized: true,
-    src: src ?? img,
-    width: 0,
-    height: 0,
+    loading: "lazy",
+    src: src ?? img.src,
     alt: "Logo",
     className: "w-auto h-auto max-w-[102px] max-h-[32px]"
   }

package/dist/components/Header/ModulesMenu.js

@@ -1,5 +1,5 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
 import '../CustomIcon/Icons/CadastroFacil.js';
 import { LogoLecom } from '../CustomIcon/Icons/LogoLecom.js';
@@ -9,7 +9,8 @@ import '../CustomIcon/Icons/LogoLecomBrand.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { cn } from '../../lib/utils.js';
-import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
 
 const Icon = ({
   icon,
@@ -21,7 +22,7 @@ const Icon = ({
     return null;
   }
   const containerIconStyles = !containerIconBgColor ? { style: { backgroundColor: bgColor, color: textColor } } : {};
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -29,9 +30,9 @@ const Icon = ({
         containerIconBgColor,
         containerIconBgColor && "text-white"
       ),
-      ...containerIconStyles
-    },
-    icon
+      ...containerIconStyles,
+      children: icon
+    }
   );
 };
 const Item = ({
@@ -61,26 +62,31 @@ const Item = ({
     }
     return highlight;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       onClick: handleClickItem,
       className: cn(
         "flex gap-4 items-center p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300",
         !!disabled && "opacity-50 hover:cursor-not-allowed"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      Icon,
-      {
-        icon,
-        containerIconBgColor,
-        bgColor,
-        textColor
-      }
-    ),
-    /* @__PURE__ */ React.createElement("div", { className: "grow" }, title && /* @__PURE__ */ React.createElement("span", { className: "body-large-500 block" }, title), description && /* @__PURE__ */ React.createElement("span", { className: "body-medium-400 block" }, description)),
-    renderHighlight()
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon,
+            containerIconBgColor,
+            bgColor,
+            textColor
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grow", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "body-large-500 block", children: title }),
+          description && /* @__PURE__ */ jsx("span", { className: "body-medium-400 block", children: description })
+        ] }),
+        renderHighlight()
+      ]
+    }
   );
 };
 const ModulesMenu = ({
@@ -94,39 +100,46 @@ const ModulesMenu = ({
   if (!title && !items) {
     return null;
   }
-  const renderButtonTrigger = () => /* @__PURE__ */ React.createElement(Tooltip, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      iconButton: true,
-      customStyles,
-      isActive: isOpen,
-      className: "flex-shrink-0"
-    },
-    /* @__PURE__ */ React.createElement(LogoLecom, null)
-  ))), /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(TooltipContent, { color: "black", align: "end", side: "bottom", hidden: isOpen }, t("header.modules"))));
-  return /* @__PURE__ */ React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen }, renderButtonTrigger(), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side: "bottom",
-      align: "end",
-      className: "w-[424px] p-2 max-md:w-full",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
+  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        iconButton: true,
+        customStyles,
+        isActive: isOpen,
+        children: /* @__PURE__ */ jsx(LogoLecom, {})
       }
-    },
-    title && /* @__PURE__ */ React.createElement("span", { className: "body-large-400 p-2 block" }, title),
-    /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, items?.map((item, i) => /* @__PURE__ */ React.createElement(
-      Item,
+    ) }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { color: "black", align: "end", side: "bottom", hidden: isOpen, children: t("header.modules") })
+  ] }) });
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    renderButtonTrigger(),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
       {
-        key: i,
-        bgColor: customStyles.focus.textColor,
-        textColor: customStyles.normal.textColor,
-        ...item
+        side: "bottom",
+        align: "end",
+        className: "w-[424px] p-2 max-md:w-full",
+        sideOffset: 16,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: [
+          title && /* @__PURE__ */ jsx("span", { className: "body-large-400 p-2 block", children: title }),
+          /* @__PURE__ */ jsx(ScrollArea, { style: { height: scrollAreaHeight }, children: items?.map((item, i) => /* @__PURE__ */ jsx(
+            Item,
+            {
+              bgColor: customStyles.focus.textColor,
+              textColor: customStyles.normal.textColor,
+              ...item
+            },
+            i
+          )) })
+        ]
       }
-    )))
-  ));
+    )
+  ] });
 };
 ModulesMenu.displayName = "ModulesMenu";
 

package/dist/components/Header/SocialMenu.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { Button } from '../Button/Button.js';
-import { MessageSquare } from 'lucide-react';
+import MessageSquare from '../../node_modules/lucide-react/dist/esm/icons/message-square.js';
 
 const SocialMenu = ({
   customStyles,
@@ -9,16 +9,15 @@ const SocialMenu = ({
   if (!onOpenSocialMenuChange) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       size: "small",
       iconButton: true,
       customStyles,
       onClick: onOpenSocialMenuChange,
-      className: "flex-shrink-0"
-    },
-    /* @__PURE__ */ React.createElement(MessageSquare, null)
+      children: /* @__PURE__ */ jsx(MessageSquare, {})
+    }
   );
 };
 SocialMenu.displayName = "SocialMenu";

package/dist/components/Header/UserMenu.js

@@ -1,13 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '../Button/Button.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover.js';
 import { ScrollArea } from '../ScrollArea/ScrollArea.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
-import { useIsMobile } from '../../hooks/useIsMobile.js';
-import { User } from 'lucide-react';
-import i18n from 'i18next';
-import { Tooltip, TooltipTrigger, TooltipPortal, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useIsMobile } from '../../hooks/use-mobile.js';
+import '../../i18n/index.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
+import { useTranslation } from '../../node_modules/react-i18next/dist/es/useTranslation.js';
+import User from '../../node_modules/lucide-react/dist/esm/icons/user.js';
+import instance from '../../node_modules/i18next/dist/esm/i18next.js';
 
 const UserMenu = ({
   customStyles,
@@ -27,18 +29,26 @@ const UserMenu = ({
       return language.render;
     }
     const handleValueChange = (value) => {
-      i18n.changeLanguage(value);
+      instance.changeLanguage(value);
       language.select?.onChange?.(value);
     };
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-2 body-large-400 [&>svg]:!w-5 [&>svg]:!h-5" }, language.icon, language.label), /* @__PURE__ */ React.createElement(
-      Select,
-      {
-        value: language.select?.value,
-        onValueChange: handleValueChange
-      },
-      /* @__PURE__ */ React.createElement(SelectTrigger, { className: "h-7" }, /* @__PURE__ */ React.createElement(SelectValue, null)),
-      /* @__PURE__ */ React.createElement(SelectContent, null, language.select?.options.map((option) => /* @__PURE__ */ React.createElement(SelectItem, { key: option.id, value: option.id }, option.name)))
-    ));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 body-large-400 [&>svg]:!w-5 [&>svg]:!h-5", children: [
+        language.icon,
+        language.label
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: language.select?.value,
+          onValueChange: handleValueChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-7", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: language.select?.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.name }, option.id)) })
+          ]
+        }
+      )
+    ] });
   };
   const renderLogout = () => {
     if (!logout) {
@@ -47,48 +57,68 @@ const UserMenu = ({
     if (logout.render) {
       return logout.render;
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: "flex items-center gap-2 body-large-400 p-2 rounded-md hover:bg-grey-200/70 hover:cursor-pointer transition-all duration-300 [&>svg]:!w-5 [&>svg]:!h-5",
-        onClick: logout.onClick
-      },
-      logout.icon,
-      logout.label
+        onClick: logout.onClick,
+        children: [
+          logout.icon,
+          logout.label
+        ]
+      }
     );
   };
-  const renderButtonTrigger = () => /* @__PURE__ */ React.createElement(Tooltip, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      iconButton: isMobile,
-      customStyles,
-      isActive: isOpen
-    },
-    isMobile ? /* @__PURE__ */ React.createElement(User, null) : user?.name
-  ))), /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(
-    TooltipContent,
-    {
-      color: "black",
-      align: "center",
-      side: "bottom",
-      hidden: isOpen
-    },
-    t("header.settings")
-  )));
-  return /* @__PURE__ */ React.createElement(Popover, { open: isOpen, onOpenChange: setIsOpen }, renderButtonTrigger(), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side: "bottom",
-      align: "end",
-      className: "w-[274px] p-2",
-      sideOffset: 16,
-      onOpenAutoFocus: (e) => {
-        e.preventDefault();
+  const renderButtonTrigger = () => /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        iconButton: isMobile,
+        customStyles,
+        isActive: isOpen,
+        children: isMobile ? /* @__PURE__ */ jsx(User, {}) : user?.name
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        color: "black",
+        align: "center",
+        side: "bottom",
+        hidden: isOpen,
+        children: t("header.settings")
+      }
+    )
+  ] }) });
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    renderButtonTrigger(),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        className: "w-[274px] p-2",
+        sideOffset: 16,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-grey-400/30 rounded-full w-9 h-9 flex items-center justify-center [&>svg]:!w-6 [&>svg]:!h-6 shrink-0", children: /* @__PURE__ */ jsx(User, { className: "text-grey-600" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "grow", children: [
+              /* @__PURE__ */ jsx("span", { className: "block body-large-400 break-all", children: user?.name }),
+              /* @__PURE__ */ jsx("span", { className: "block body-medium-400 break-all", children: user?.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { style: { height: scrollAreaHeight }, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+            renderLanguage(),
+            renderLogout()
+          ] }) })
+        ] })
       }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 p-2" }, /* @__PURE__ */ React.createElement("div", { className: "bg-grey-400/30 rounded-full w-9 h-9 flex items-center justify-center [&>svg]:!w-6 [&>svg]:!h-6 shrink-0" }, /* @__PURE__ */ React.createElement(User, { className: "text-grey-600" })), /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("span", { className: "block body-large-400 break-words" }, user?.name), /* @__PURE__ */ React.createElement("span", { className: "block body-medium-400 break-all" }, user?.email))), /* @__PURE__ */ React.createElement(ScrollArea, { style: { height: scrollAreaHeight } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center" }, renderLanguage(), renderLogout())))
-  ));
+    )
+  ] });
 };
 UserMenu.displayName = "UserMenu";
 

package/dist/components/Input/Input.js

@@ -1,6 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '../../lib/utils.js';
-import { cva } from 'class-variance-authority';
+import { cva } from '../../node_modules/class-variance-authority/dist/index.js';
 
 const inputVariants = cva(
   `flex h-8 w-full rounded-md border border-input bg-background px-3 py-2
@@ -71,7 +72,15 @@ const Input = React.forwardRef(
       }
       return sufix;
     };
-    return /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, renderPrefix(), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center relative" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0 absolute left-3" }, /* @__PURE__ */ React.createElement(Icon, { icon: iconBefore })), /* @__PURE__ */ React.createElement("input", { type, className: inputStyles(), ref, ...props }), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 absolute right-3" }, /* @__PURE__ */ React.createElement(Icon, { icon: iconAfter }))), renderSufix());
+    return /* @__PURE__ */ jsxs("div", { className: "flex justify-center", children: [
+      renderPrefix(),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 absolute left-3", children: /* @__PURE__ */ jsx(Icon, { icon: iconBefore }) }),
+        /* @__PURE__ */ jsx("input", { type, className: inputStyles(), ref, ...props }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 absolute right-3", children: /* @__PURE__ */ jsx(Icon, { icon: iconAfter }) })
+      ] }),
+      renderSufix()
+    ] });
   }
 );
 Input.displayName = "Input";