lecom-ui 5.4.30 → 5.4.32

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,16 +56,13 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium",
-    disabled = false
+    size = "medium"
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
-    const [dynamicMaxCount, setDynamicMaxCount] = React.useState(
-      selectedValues.length || 1
-    );
+    const [dynamicMaxCount, setDynamicMaxCount] = React.useState(selectedValues.length || 1);
     const buttonRef = React.useRef(null);
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
@@ -343,10 +340,7 @@ const MultiSelect = React.forwardRef(
         if (!node.children || node.children.length === 0) {
           return [node.value];
         }
-        return [
-          node.value,
-          ...node.children.flatMap((c) => collectAllValues(c))
-        ];
+        return [node.value, ...node.children.flatMap((c) => collectAllValues(c))];
       }
     };
     const isNodeFullySelected = (node) => {
@@ -520,60 +514,40 @@ const MultiSelect = React.forwardRef(
               transition-all duration-300 outline-none
               [&_svg]:pointer-events-auto`,
             maxCount === void 0 && TRIGGER_HEIGHT_CLASSES[size],
-            disabled && "opacity-50 cursor-not-allowed pointer-events-none",
             className
           ),
-          "aria-expanded": isPopoverOpen,
-          disabled
+          "aria-expanded": isPopoverOpen
         },
         selectedValues.length > 0 ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-1" }, selectedValues.slice(0, dynamicMaxCount).map((value2) => {
-          const selectedOption = options.find(
-            (option) => option.value === value2
-          );
+          const selectedOption = options.find((option) => option.value === value2);
           const label = findTreeLabel(value2) || selectedOption?.label || value2;
           const prefix = selectedOption?.prefix;
-          return /* @__PURE__ */ React.createElement(
-            Tag,
+          return /* @__PURE__ */ React.createElement(Tag, { key: value2, color: "blue", className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
+            Typography,
             {
-              key: value2,
-              color: "blue",
-              className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]"
+              className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
+              textColor: "text-blue-600"
             },
-            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, prefix && /* @__PURE__ */ React.createElement(
-              Typography,
-              {
-                className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
-                textColor: "text-blue-600"
-              },
-              prefix
-            ), /* @__PURE__ */ React.createElement(
-              Typography,
-              {
-                variant: getFontVariant(size),
-                textColor: "text-blue-600",
-                className: "truncate"
-              },
-              label
-            )),
-            !disabled && /* @__PURE__ */ React.createElement(
-              X,
-              {
-                className: "h-4 w-4 cursor-pointer flex-shrink-0",
-                onClick: (event) => {
-                  event.stopPropagation();
-                  toggleOption(value2);
-                }
+            prefix
+          ), /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              variant: getFontVariant(size),
+              textColor: "text-blue-600",
+              className: "truncate"
+            },
+            label
+          )), /* @__PURE__ */ React.createElement(
+            X,
+            {
+              className: "h-4 w-4 cursor-pointer flex-shrink-0",
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleOption(value2);
               }
-            )
-          );
-        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: getFontVariant(size),
-            className: "text-blue-600"
-          },
-          `+ ${selectedValues.length - dynamicMaxCount}`
-        ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, !disabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            }
+          ));
+        }), selectedValues.length > dynamicMaxCount && /* @__PURE__ */ React.createElement(Tag, { color: "blue", className: "focus:ring-0" }, /* @__PURE__ */ React.createElement(Typography, { variant: getFontVariant(size), className: "text-blue-600" }, `+ ${selectedValues.length - dynamicMaxCount}`))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -588,11 +562,11 @@ const MultiSelect = React.forwardRef(
             orientation: "vertical",
             className: "flex min-h-4 mx-1 h-full"
           }
-        )), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
+        ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 w-4 cursor-pointer text-grey-800" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4 cursor-pointer text-grey-800" }))) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full mx-auto" }, /* @__PURE__ */ React.createElement(
           Typography,
           {
             variant: getFontVariant(size),
-            className: "text-grey-500 mx-3"
+            className: "text-grey-800 mx-3"
           },
           placeholder
         ), isPopoverOpen ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h-4 cursor-pointer text-grey-800 mx-2" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 cursor-pointer text-grey-800 mx-2" }))
@@ -609,155 +583,114 @@ const MultiSelect = React.forwardRef(
           align: "start",
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
-        !isTree && /* @__PURE__ */ React.createElement(
-          Command,
+        !isTree && /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, /* @__PURE__ */ React.createElement(
+          CommandInput,
+          {
+            placeholder: treeSearchPlaceholder || t("multiSelect.search"),
+            onKeyDown: handleInputKeyDown,
+            value: query,
+            onValueChange: (v) => setQuery(v)
+          }
+        ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(CommandEmpty, { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
+          CommandItem,
           {
-            shouldFilter: false,
-            className: SEARCH_INPUT_CLASSES[size]
+            key: "all",
+            onSelect: toggleAll,
+            className: "cursor-pointer"
           },
           /* @__PURE__ */ React.createElement(
-            CommandInput,
-            {
-              placeholder: treeSearchPlaceholder || t("multiSelect.search"),
-              onKeyDown: handleInputKeyDown,
-              value: query,
-              onValueChange: (v) => setQuery(v)
-            }
-          ),
-          /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
-            CommandEmpty,
+            "div",
             {
               className: cn(
-                "p-4 text-center text-grey-800",
-                getFontVariant(size)
+                "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
+                selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
               )
             },
-            t("multiSelect.empty")
-          ), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
+            selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+          ),
+          /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              variant: getFontVariant(size),
+              className: "text-grey-800"
+            },
+            selectAllLabel ?? t("multiSelect.selectAll")
+          )
+        ), isGrouped ? Object.entries(groupedOptions).map(
+          ([categoryName, categoryOptions]) => {
+            const filtered = categoryOptions.filter(
+              (opt) => !query || effectiveOptions.some(
+                (eff) => eff.value === opt.value && filteredOptions.some(
+                  (filt) => filt.value === opt.value
+                )
+              )
+            );
+            if (!filtered.length) return null;
+            return /* @__PURE__ */ React.createElement("div", { key: categoryName }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 text-xs font-medium text-muted-foreground" }, categoryName), filtered.map((option) => {
+              const isSelected = selectedValues.includes(
+                option.value
+              );
+              return /* @__PURE__ */ React.createElement(
+                CommandItem,
+                {
+                  key: option.value,
+                  onSelect: () => toggleOption(option.value),
+                  className: "cursor-pointer"
+                },
+                /* @__PURE__ */ React.createElement(
+                  "div",
+                  {
+                    className: cn(
+                      "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400 flex-shrink-0",
+                      isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    )
+                  },
+                  /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+                ),
+                /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+                  Typography,
+                  {
+                    variant: getFontVariant(size),
+                    className: "text-grey-800 truncate overflow-hidden",
+                    title: option.label
+                  },
+                  highlight(option.label, query)
+                ))
+              );
+            }));
+          }
+        ) : filteredOptions.map((option) => {
+          const isSelected = selectedValues.includes(
+            option.value
+          );
+          return /* @__PURE__ */ React.createElement(
             CommandItem,
             {
-              key: "all",
-              onSelect: toggleAll,
+              key: option.value,
+              onSelect: () => toggleOption(option.value),
               className: "cursor-pointer"
             },
             /* @__PURE__ */ React.createElement(
               "div",
               {
                 className: cn(
-                  "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800",
-                  selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800 flex-shrink-0",
+                  isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                 )
               },
-              selectedValues.length === effectiveOptions.length ? /* @__PURE__ */ React.createElement(
-                Check,
-                {
-                  className: "!h-3 !w-3 !text-white",
-                  strokeWidth: 3
-                }
-              ) : /* @__PURE__ */ React.createElement(
-                Minus,
-                {
-                  className: "!h-3 !w-3 !text-white",
-                  strokeWidth: 3
-                }
-              )
+              /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
             ),
-            /* @__PURE__ */ React.createElement(
+            /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
               Typography,
               {
                 variant: getFontVariant(size),
-                className: "text-grey-800"
-              },
-              selectAllLabel ?? t("multiSelect.selectAll")
-            )
-          ), isGrouped ? Object.entries(groupedOptions).map(
-            ([categoryName, categoryOptions]) => {
-              const filtered = categoryOptions.filter(
-                (opt) => !query || effectiveOptions.some(
-                  (eff) => eff.value === opt.value && filteredOptions.some(
-                    (filt) => filt.value === opt.value
-                  )
-                )
-              );
-              if (!filtered.length) return null;
-              return /* @__PURE__ */ React.createElement("div", { key: categoryName }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 text-xs font-medium text-muted-foreground" }, categoryName), filtered.map((option) => {
-                const isSelected = selectedValues.includes(
-                  option.value
-                );
-                return /* @__PURE__ */ React.createElement(
-                  CommandItem,
-                  {
-                    key: option.value,
-                    onSelect: () => toggleOption(option.value),
-                    className: "cursor-pointer"
-                  },
-                  /* @__PURE__ */ React.createElement(
-                    "div",
-                    {
-                      className: cn(
-                        "flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400 flex-shrink-0",
-                        isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-                      )
-                    },
-                    /* @__PURE__ */ React.createElement(
-                      Check,
-                      {
-                        className: "!h-3 !w-3 !text-white",
-                        strokeWidth: 3
-                      }
-                    )
-                  ),
-                  /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
-                    Typography,
-                    {
-                      variant: getFontVariant(size),
-                      className: "text-grey-800 truncate overflow-hidden",
-                      title: option.label
-                    },
-                    highlight(option.label, query)
-                  ))
-                );
-              }));
-            }
-          ) : filteredOptions.map((option) => {
-            const isSelected = selectedValues.includes(
-              option.value
-            );
-            return /* @__PURE__ */ React.createElement(
-              CommandItem,
-              {
-                key: option.value,
-                onSelect: () => toggleOption(option.value),
-                className: "cursor-pointer"
+                className: "text-grey-800 truncate overflow-hidden",
+                title: option.label
               },
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: cn(
-                    "flex h-4 w-4 items-center justify-center rounded-sm border border-grey-800 flex-shrink-0",
-                    isSelected ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
-                  )
-                },
-                /* @__PURE__ */ React.createElement(
-                  Check,
-                  {
-                    className: "!h-3 !w-3 !text-white",
-                    strokeWidth: 3
-                  }
-                )
-              ),
-              /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
-                Typography,
-                {
-                  variant: getFontVariant(size),
-                  className: "text-grey-800 truncate overflow-hidden",
-                  title: option.label
-                },
-                highlight(option.label, query)
-              ))
-            );
-          })))
-        ),
+              highlight(option.label, query)
+            ))
+          );
+        })))),
         isTree && /* @__PURE__ */ React.createElement("div", { className: "min-w-[260px] max-h-80 overflow-hidden flex flex-col" }, treeSearch && /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2 pb-0 border-b border-grey-300 flex-shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
           "svg",
           {
@@ -812,19 +745,7 @@ const MultiSelect = React.forwardRef(
                   acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
               }
               return acc;
-            }(treeOptions) ? /* @__PURE__ */ React.createElement(
-              Check,
-              {
-                className: "!h-3 !w-3 !text-white",
-                strokeWidth: 3
-              }
-            ) : /* @__PURE__ */ React.createElement(
-              Minus,
-              {
-                className: "!h-3 !w-3 !text-white",
-                strokeWidth: 3
-              }
-            )
+            }(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }) : /* @__PURE__ */ React.createElement(Minus, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
           ),
           /* @__PURE__ */ React.createElement(
             Typography,
@@ -834,16 +755,7 @@ const MultiSelect = React.forwardRef(
             },
             selectAllLabel ?? t("multiSelect.selectAll")
           )
-        ), !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: cn(
-              "p-4 text-center text-grey-800",
-              getFontVariant(size)
-            )
-          },
-          t("multiSelect.empty")
-        ) : renderTree(displayedTree)))
+        ), !treeOptions || treeOptions.length === 0 || treeQuery && displayedTree.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: cn("p-4 text-center text-grey-800", getFontVariant(size)) }, t("multiSelect.empty")) : renderTree(displayedTree)))
       )
     );
   }

package/dist/components/Pagination/Pagination.js

@@ -145,8 +145,7 @@ const PaginationPerPage = ({
   className,
   onChangePerPage,
   perPage,
-  totalRowsSelected = 0,
-  maxSelection
+  totalRowsSelected = 0
 }) => {
   const { t } = useTranslation();
   const perPageOptions = [
@@ -166,12 +165,6 @@ const PaginationPerPage = ({
   if (!onChangePerPage) {
     return null;
   }
-  const getSelectedText = () => {
-    if (maxSelection === 1 && totalRowsSelected === 1) {
-      return `${totalRowsSelected} ${t("pagination.selectedItemSingular")}`;
-    }
-    return `${totalRowsSelected} ${t("pagination.selectedProcess")}`;
-  };
   return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-center gap-4", className) }, /* @__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,
     {
@@ -181,7 +174,7 @@ const PaginationPerPage = ({
       }
     },
     option.value.toString()
-  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()));
+  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess")));
 };
 PaginationPerPage.displayName = "PaginationPerPage";
 const Pagination = ({
@@ -192,8 +185,7 @@ const Pagination = ({
   onChangePerPage,
   className,
   activeColor,
-  showPerPageSelector = true,
-  maxSelection
+  showPerPageSelector = true
 }) => {
   const { t } = useTranslation();
   const mapPaginationItem = (item) => {
@@ -223,12 +215,6 @@ const Pagination = ({
     };
     return React.createElement(mappedComponents[item.type], componentProps);
   };
-  const getSelectedText = () => {
-    if (maxSelection === 1 && totalRowsSelected === 1) {
-      return `${totalRowsSelected} ${t("pagination.selectedItemSingular")}`;
-    }
-    return `${totalRowsSelected} ${t("pagination.selectedProcess")}`;
-  };
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -239,11 +225,10 @@ const Pagination = ({
       {
         onChangePerPage,
         perPage,
-        totalRowsSelected,
-        maxSelection
+        totalRowsSelected
       }
     ),
-    !showPerPageSelector && totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()),
+    !showPerPageSelector && 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)))))
   );
 };

package/dist/components/ScrollArea/ScrollArea.js

@@ -27,7 +27,7 @@ const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...pr
     ),
     ...props
   },
-  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border bg-grey-400 hover:bg-gray-500" })
+  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 

package/dist/components/TagInput/TagInput.js

@@ -13,31 +13,15 @@ function TagItem({ item, onRemove, readOnly }) {
     },
     [item.value, onRemove]
   );
-  return /* @__PURE__ */ React.createElement(
-    Tag,
+  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "max-w-[15.625rem] h-6 !px-2 !py-0.5" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600 truncate p-0" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
+    X,
     {
-      "data-tag": "true",
-      color: "blue",
-      className: "max-w-[15.625rem] h-6 !px-2 !py-0.5"
-    },
-    /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "body-small-400",
-        className: "text-blue-600 truncate p-0"
-      },
-      item.label
-    ),
-    !readOnly && /* @__PURE__ */ React.createElement(
-      X,
-      {
-        className: "w-4 h-4 cursor-pointer flex-shrink-0",
-        onClick: handleRemove,
-        "aria-label": `Remover ${item.label}`,
-        tabIndex: 0
-      }
-    )
-  );
+      className: "w-4 h-4 cursor-pointer flex-shrink-0",
+      onClick: handleRemove,
+      "aria-label": `Remover ${item.label}`,
+      tabIndex: 0
+    }
+  ));
 }
 function HiddenCountTag({ count }) {
   return /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", count));
@@ -85,8 +69,7 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
   const [maxLines, setMaxLines] = React.useState(null);
   const hasCalculatedMaxLines = React.useRef(false);
   React.useEffect(() => {
-    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0)
-      return;
+    if (hasCalculatedMaxLines.current || !ref.current || value.length === 0) return;
     const calculateMaxLines = () => {
       if (!ref.current) {
         setTimeout(calculateMaxLines, 10);
@@ -100,10 +83,7 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
       const TAG_HEIGHT = 24;
       const CONTAINER_PADDING_VERTICAL = 4;
       const availableHeight = containerHeight - CONTAINER_PADDING_VERTICAL * 2;
-      const calculatedMaxLines = Math.max(
-        1,
-        Math.floor(availableHeight / TAG_HEIGHT)
-      );
+      const calculatedMaxLines = Math.max(1, Math.floor(availableHeight / TAG_HEIGHT));
       setMaxLines(calculatedMaxLines);
       hasCalculatedMaxLines.current = true;
     };
@@ -146,11 +126,7 @@ function useDynamicMaxCount(ref, value, maxDisplayCount) {
         setDynamicMaxCount(value.length);
         return;
       }
-      const count = simulateTagLayout(
-        estimatedWidths,
-        availableWidth,
-        maxLines
-      );
+      const count = simulateTagLayout(estimatedWidths, availableWidth, maxLines);
       setDynamicMaxCount(count);
     };
     const rafId = requestAnimationFrame(() => {
@@ -216,7 +192,7 @@ function TagInput(props) {
       style: containerStyles,
       ...restProps
     },
-    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-500" }, placeholder),
+    value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
     displayTags.map((item) => /* @__PURE__ */ React.createElement(
       TagItem,
       {

package/dist/i18n/locales/en_us.js

@@ -9,8 +9,7 @@ const language = {
     },
     pagination: {
       show: "Show:",
-      selectedProcess: "Item(s) selected",
-      selectedItemSingular: "item selected"
+      selectedProcess: "selected process"
     },
     upload: {
       label: "Drag and drop the file here or click to select it.",
@@ -21,8 +20,7 @@ const language = {
       search: "Type to search",
       empty: "No results found",
       selectAll: "Select all",
-      placeholder: "Select",
-      create: "Create"
+      placeholder: "Select"
     }
   }
 };

package/dist/i18n/locales/es_es.js

@@ -9,8 +9,7 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) seleccionado(s)",
-      selectedItemSingular: "item seleccionado"
+      selectedProcess: "Item(s) seleccionado(s)"
     },
     upload: {
       label: "Arrastre y suelte el archivo aqu\xED o haga clic para seleccionarlo.",
@@ -21,8 +20,7 @@ const language = {
       search: "Tipo a buscar",
       empty: "No se han encontrado resultados",
       selectAll: "Seleccionar todo",
-      placeholder: "Seleccionar",
-      create: "Crear"
+      placeholder: "Seleccionar"
     }
   }
 };

package/dist/i18n/locales/pt_br.js

@@ -9,8 +9,7 @@ const language = {
     },
     pagination: {
       show: "Mostrar:",
-      selectedProcess: "Item(s) selecionado(s)",
-      selectedItemSingular: "item selecionado"
+      selectedProcess: "Item(s) selecionado(s)"
     },
     upload: {
       label: "Arraste e solte o arquivo aqui ou clique para selecion\xE1-lo.",
@@ -21,8 +20,7 @@ const language = {
       search: "Digite para pesquisar",
       empty: "Nenhum resultado encontrado",
       selectAll: "Selecionar tudo",
-      placeholder: "Selecione",
-      create: "Criar"
+      placeholder: "Selecione"
     }
   }
 };