lecom-ui 5.4.32 → 5.4.33

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,13 +56,17 @@ const MultiSelect = React.forwardRef(
     allowTypoDistance = 0,
     groupedOptions,
     classNameContent,
-    size = "medium"
+    size = "medium",
+    disabled = false,
+    readOnly = false
   }, 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) => {
@@ -166,11 +170,13 @@ 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([]);
     };
@@ -178,6 +184,7 @@ 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) {
@@ -340,7 +347,10 @@ 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) => {
@@ -371,6 +381,7 @@ 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];
@@ -454,7 +465,8 @@ 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"
+            (fully || isSelectedLeaf) && "bg-blue-50",
+            readOnly && "cursor-default hover:bg-transparent"
           ),
           style: { paddingLeft: depth * 14 + 8 }
         },
@@ -467,7 +479,9 @@ const MultiSelect = React.forwardRef(
             ),
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             }
           },
           fully && /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 }),
@@ -480,7 +494,9 @@ const MultiSelect = React.forwardRef(
             className: "flex-1 truncate cursor-pointer overflow-hidden",
             onClick: (e) => {
               e.stopPropagation();
-              toggleTreeNode(n);
+              if (!readOnly) {
+                toggleTreeNode(n);
+              }
             },
             title: n.label
           },
@@ -514,40 +530,62 @@ 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-expanded": isPopoverOpen,
+          "aria-readonly": readOnly,
+          disabled
         },
         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, { 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,
-            {
-              className: "flex items-center flex-shrink-0 [&_svg]:text-blue-600",
-              textColor: "text-blue-600"
-            },
-            prefix
-          ), /* @__PURE__ */ React.createElement(
-            Typography,
+          return /* @__PURE__ */ React.createElement(
+            Tag,
             {
-              variant: getFontVariant(size),
-              textColor: "text-blue-600",
-              className: "truncate"
+              key: value2,
+              color: "blue",
+              className: "focus:ring-0 flex items-center gap-2 max-w-[15.625rem]"
             },
-            label
-          )), /* @__PURE__ */ React.createElement(
-            X,
-            {
-              className: "h-4 w-4 cursor-pointer flex-shrink-0",
-              onClick: (event) => {
-                event.stopPropagation();
-                toggleOption(value2);
+            /* @__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);
+                }
               }
-            }
-          ));
-        }), 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(
+            )
+          );
+        }), 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(
           X,
           {
             className: "h-4 w-4 cursor-pointer text-grey-800",
@@ -562,11 +600,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-800 mx-3"
+            className: "text-grey-500 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" }))
@@ -583,114 +621,165 @@ const MultiSelect = React.forwardRef(
           align: "start",
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
-        !isTree && /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, /* @__PURE__ */ React.createElement(
-          CommandInput,
+        !isTree && /* @__PURE__ */ React.createElement(
+          Command,
           {
-            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"
+            shouldFilter: false,
+            className: SEARCH_INPUT_CLASSES[size]
           },
           /* @__PURE__ */ React.createElement(
-            "div",
+            CommandInput,
             {
-              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"
-              )
-            },
-            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 })
+              placeholder: treeSearchPlaceholder || t("multiSelect.search"),
+              onKeyDown: handleInputKeyDown,
+              value: query,
+              onValueChange: (v) => setQuery(v),
+              disabled: readOnly
+            }
           ),
-          /* @__PURE__ */ React.createElement(
-            Typography,
+          /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
+            CommandEmpty,
             {
-              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
-                )
+              className: cn(
+                "p-4 text-center text-grey-800",
+                getFontVariant(size)
               )
-            );
-            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(
+            },
+            t("multiSelect.empty")
+          ), !query && effectiveOptions.length > 0 && /* @__PURE__ */ React.createElement(
             CommandItem,
             {
-              key: option.value,
-              onSelect: () => toggleOption(option.value),
-              className: "cursor-pointer"
+              key: "all",
+              onSelect: readOnly ? void 0 : toggleAll,
+              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"
+                  "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"
                 )
               },
-              /* @__PURE__ */ React.createElement(Check, { className: "!h-3 !w-3 !text-white", strokeWidth: 3 })
+              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("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(
+            /* @__PURE__ */ React.createElement(
               Typography,
               {
                 variant: getFontVariant(size),
-                className: "text-grey-800 truncate overflow-hidden",
-                title: option.label
+                className: "text-grey-800"
               },
-              highlight(option.label, query)
-            ))
-          );
-        })))),
+              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)
+              ))
+            );
+          })))
+        ),
         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",
           {
@@ -715,6 +804,7 @@ 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),
@@ -724,8 +814,11 @@ 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: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent",
-            onClick: toggleAll
+            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
           },
           /* @__PURE__ */ React.createElement(
             "div",
@@ -745,7 +838,19 @@ 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,
@@ -755,7 +860,16 @@ 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,7 +145,8 @@ const PaginationPerPage = ({
   className,
   onChangePerPage,
   perPage,
-  totalRowsSelected = 0
+  totalRowsSelected = 0,
+  maxSelection
 }) => {
   const { t } = useTranslation();
   const perPageOptions = [
@@ -165,6 +166,12 @@ 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,
     {
@@ -174,7 +181,7 @@ const PaginationPerPage = ({
       }
     },
     option.value.toString()
-  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess")));
+  )))), totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()));
 };
 PaginationPerPage.displayName = "PaginationPerPage";
 const Pagination = ({
@@ -185,7 +192,8 @@ const Pagination = ({
   onChangePerPage,
   className,
   activeColor,
-  showPerPageSelector = true
+  showPerPageSelector = true,
+  maxSelection
 }) => {
   const { t } = useTranslation();
   const mapPaginationItem = (item) => {
@@ -215,6 +223,12 @@ 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",
     {
@@ -225,10 +239,11 @@ const Pagination = ({
       {
         onChangePerPage,
         perPage,
-        totalRowsSelected
+        totalRowsSelected,
+        maxSelection
       }
     ),
-    !showPerPageSelector && totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, totalRowsSelected, " ", t("pagination.selectedProcess")),
+    !showPerPageSelector && totalRowsSelected > 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "heading-xxsmall-600", textColor: "text-grey-800" }, getSelectedText()),
     /* @__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" })
+  /* @__PURE__ */ React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border bg-grey-400 hover:bg-gray-500" })
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;