lecom-ui 5.4.31 → 5.4.32

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,17 +56,13 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium",
-    disabled = false,
-    readOnly = 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) => {
@@ -170,13 +166,11 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleOption = (option) => {
-      if (readOnly) return;
       const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value2) => value2 !== option) : [...selectedValues, option];
       setSelectedValues(newSelectedValues);
       onValueChange(newSelectedValues);
     };
     const handleClear = () => {
-      if (readOnly) return;
       setSelectedValues([]);
       onValueChange([]);
     };
@@ -184,7 +178,6 @@ const MultiSelect = React.forwardRef(
       setIsPopoverOpen((prev) => !prev);
     };
     const toggleAll = () => {
-      if (readOnly) return;
       if (treeOptions && treeOptions.length) {
         const gather = (acc, nodes) => {
           for (const n of nodes) {
@@ -347,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) => {
@@ -381,7 +371,6 @@ const MultiSelect = React.forwardRef(
       }
     };
     const toggleTreeNode = (node) => {
-      if (readOnly) return;
       if (treeSelectionStrategy === "all") {
         const isSelected = selectedValues.includes(node.value);
         const next = isSelected ? selectedValues.filter((v) => v !== node.value) : [...selectedValues, node.value];
@@ -465,8 +454,7 @@ const MultiSelect = React.forwardRef(
         {
           className: cn(
             "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100",
-            (fully || isSelectedLeaf) && "bg-blue-50",
-            readOnly && "cursor-default hover:bg-transparent"
+            (fully || isSelectedLeaf) && "bg-blue-50"
           ),
           style: { paddingLeft: depth * 14 + 8 }
         },
@@ -479,9 +467,7 @@ const MultiSelect = React.forwardRef(
             ),
             onClick: (e) => {
               e.stopPropagation();
-              if (!readOnly) {
-                toggleTreeNode(n);
-              }
+              toggleTreeNode(n);
             }
           },
           fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
@@ -494,9 +480,7 @@ const MultiSelect = React.forwardRef(
             className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
-              if (!readOnly) {
-                toggleTreeNode(n);
-              }
+              toggleTreeNode(n);
             },
             title: n.label
           },
@@ -530,62 +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",
-            readOnly && !disabled && "opacity-50 hover:border-grey-400",
             className
           ),
-          "aria-expanded": isPopoverOpen,
-          "aria-readonly": readOnly,
-          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 && !readOnly && /* @__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 && !readOnly && /* @__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",
@@ -600,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" }))
@@ -621,165 +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,
           {
-            shouldFilter: false,
-            className: SEARCH_INPUT_CLASSES[size]
+            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,
+          {
+            key: "all",
+            onSelect: toggleAll,
+            className: "cursor-pointer"
           },
           /* @__PURE__ */ React.createElement(
-            CommandInput,
-            {
-              placeholder: treeSearchPlaceholder || t("multiSelect.search"),
-              onKeyDown: handleInputKeyDown,
-              value: query,
-              onValueChange: (v) => setQuery(v),
-              disabled: readOnly
-            }
-          ),
-          /* @__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(
-            CommandItem,
+            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,
             {
-              key: "all",
-              onSelect: readOnly ? void 0 : toggleAll,
-              className: cn(
-                "cursor-pointer",
-                readOnly && "cursor-default pointer-events-none hover:bg-transparent"
+              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"
             },
             /* @__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"
+                className: "text-grey-800 truncate overflow-hidden",
+                title: option.label
               },
-              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: readOnly ? void 0 : () => toggleOption(option.value),
-                    className: cn(
-                      "cursor-pointer",
-                      readOnly && "cursor-default pointer-events-none hover:bg-transparent"
-                    )
-                  },
-                  /* @__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: readOnly ? void 0 : () => toggleOption(option.value),
-                className: cn(
-                  "cursor-pointer",
-                  readOnly && "cursor-default pointer-events-none hover:bg-transparent"
-                )
-              },
-              /* @__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",
           {
@@ -804,7 +715,6 @@ const MultiSelect = React.forwardRef(
             value: treeQuery,
             onChange: (e) => setTreeQuery(e.target.value),
             placeholder: treeSearchPlaceholder || t("multiSelect.search"),
-            disabled: readOnly,
             className: cn(
               "w-full pl-9 pr-3 border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground",
               getFontVariant(size),
@@ -814,11 +724,8 @@ const MultiSelect = React.forwardRef(
         ))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400" }, !treeQuery && treeOptions && treeOptions.length > 0 && /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: cn(
-              "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
-              readOnly && "cursor-default hover:bg-transparent pointer-events-none"
-            ),
-            onClick: readOnly ? void 0 : toggleAll
+            className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
+            onClick: toggleAll
           },
           /* @__PURE__ */ React.createElement(
             "div",
@@ -838,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,
@@ -860,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;