lecom-ui 5.2.70 → 5.2.72

package/dist/components/Combobox/Combobox.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
 import { Button } from '../Button/Button.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { Typography } from '../Typography/Typography.js';
-import { cn } from '../../lib/utils.js';
-import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react';
 
 function Combobox({
   options,
@@ -65,26 +65,12 @@ function Combobox({
       {
         className: cn(
           value ? "text-black" : "text-gray-400",
-          "font-normal",
-          "truncate",
-          "max-w-[calc(100%-2.5rem)]"
+          "font-normal truncate max-w-[calc(100%-2.5rem)]"
         )
       },
       /* @__PURE__ */ React.createElement(Typography, { variant: "body-medium-400" }, selectedLabel)
     ),
-    open ? /* @__PURE__ */ React.createElement(
-      ChevronUpIcon,
-      {
-        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
-        color: "black"
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      ChevronDownIcon,
-      {
-        className: "ml-2 h-4 w-4 shrink-0 text-gray-400",
-        color: "black"
-      }
-    )
+    open ? /* @__PURE__ */ React.createElement(ChevronUpIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" }) : /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "ml-2 h-4 w-4 shrink-0 text-gray-400" })
   )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0" }, /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
     CommandInput,
     {
@@ -93,7 +79,7 @@ function Combobox({
       onValueChange: setSearch
     }
   ), /* @__PURE__ */ React.createElement(CommandList, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, notFoundContent), filteredOptions.map(
-    (item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: item.label + idx, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
+    (item, idx) => "options" in item ? /* @__PURE__ */ React.createElement(CommandGroup, { key: `${item.label}-${idx}`, heading: item.label }, item.options.map((opt) => /* @__PURE__ */ React.createElement(
       CommandItem,
       {
         key: opt.value,

package/dist/components/CustomDivider/CustomDivider.js

@@ -26,10 +26,9 @@ function DividerLine({
       "div",
       {
         className: cn(
-          "w-full",
+          "w-full border-t",
           dashed ? "border-dashed" : "border-solid",
-          plain ? "border-gray-200" : "border-gray-300",
-          "border-t"
+          plain ? "border-gray-200" : "border-gray-300"
         )
       }
     )
@@ -108,7 +107,14 @@ function CustomDivider({
   style,
   children
 }) {
-  if (lineOnly) {
+  const formContext = useFormContext();
+  const controlToUse = control ?? formContext?.control;
+  const justifyMap = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  };
+  if (lineOnly && !children) {
     return /* @__PURE__ */ React.createElement(
       DividerLine,
       {
@@ -121,23 +127,7 @@ function CustomDivider({
       }
     );
   }
-  const dividerLineProps = {
-    dashed,
-    plain,
-    isGroupDivider,
-    isActive,
-    className,
-    style
-  };
-  if (lineOnly && children == null) {
-    return /* @__PURE__ */ React.createElement(DividerLine, { ...dividerLineProps });
-  }
-  if (children != null) {
-    const justifyMap2 = {
-      left: "justify-start",
-      center: "justify-center",
-      right: "justify-end"
-    };
+  if (children) {
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -145,7 +135,7 @@ function CustomDivider({
           "relative w-full flex items-center",
           isGroupDivider ? "my-4" : "my-2",
           isActive ? "opacity-100" : "opacity-50",
-          justifyMap2[orientation],
+          justifyMap[orientation],
           className
         ),
         style
@@ -154,10 +144,9 @@ function CustomDivider({
         "div",
         {
           className: cn(
-            "absolute inset-x-0",
+            "absolute inset-x-0 border-t",
             dashed ? "border-dashed" : "border-solid",
-            plain ? "border-gray-200" : "border-gray-300",
-            "border-t"
+            plain ? "border-gray-200" : "border-gray-300"
           )
         }
       ),
@@ -166,16 +155,9 @@ function CustomDivider({
   }
   if (!name) {
     throw new Error(
-      "CustomDivider: prop `name` is required when `lineOnly` is false."
+      "CustomDivider: prop `name` \xE9 obrigat\xF3ria se `lineOnly` for false."
     );
   }
-  const formContext = useFormContext();
-  const controlToUse = control ?? formContext.control;
-  const justifyMap = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end"
-  };
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -192,10 +174,9 @@ function CustomDivider({
       "div",
       {
         className: cn(
-          "absolute inset-x-0",
+          "absolute inset-x-0 border-t",
           dashed ? "border-dashed" : "border-solid",
-          plain ? "border-gray-200" : "border-gray-300",
-          "border-t"
+          plain ? "border-gray-200" : "border-gray-300"
         )
       }
     ),
@@ -221,5 +202,6 @@ function CustomDivider({
     )
   );
 }
+CustomDivider.displayName = "CustomDivider";
 
 export { CustomDivider };

package/dist/components/DataTable/DataTable.utils.js

@@ -114,11 +114,7 @@ function buildColumns({
       fixed: externalColumn.fixed,
       truncate: !!externalColumn.truncate,
       headerClassName: externalColumn.headerClassName,
-      headerStyle: externalColumn.headerStyle,
-      cellClassName: externalColumn.cellClassName,
-      cellStyle: externalColumn.cellStyle,
-      cellProps: externalColumn.cellProps,
-      align: externalColumn.align
+      headerStyle: externalColumn.headerStyle
     },
     sortingFn: (rowA, rowB, columnId) => {
       if (externalColumn.onSortClient) {

package/dist/components/DataTable/Table.js

@@ -13,35 +13,25 @@ function Table({
   onIsSelected
 }) {
   const styleColumn = (meta, elem) => {
-    if (!meta) return void 0;
-    let style = {};
     if (elem === "td" && meta.truncate) {
-      style = {
-        ...style,
+      return {
         width: meta.width,
         overflow: "hidden",
         maxWidth: "0",
         textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        ...typeof meta.cellStyle === "object" && meta.cellStyle !== null ? meta.cellStyle : {}
-      };
-    } else {
-      style = {
-        ...style,
-        width: meta.width,
-        ...elem === "td" ? typeof meta.cellStyle === "object" && meta.cellStyle !== null ? meta.cellStyle : {} : typeof meta.headerStyle === "object" && meta.headerStyle !== null ? meta.headerStyle : {}
+        whiteSpace: "nowrap"
       };
     }
-    if (meta.align)
-      style.textAlign = meta.align;
-    return style;
+    return {
+      width: meta.width
+    };
   };
-  const getFixed = (meta) => meta?.fixed;
+  const getFixed = (meta) => meta.fixed;
   if (isLoading) {
     if (skeleton) {
       return skeleton;
     }
-    const arrSkeleton = Array.from({ length: 15 }, (_, i) => i + 1);
+    const arrSkeleton = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
     return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, arrSkeleton.map((id) => /* @__PURE__ */ React.createElement(
       Skeleton,
       {
@@ -50,55 +40,45 @@ function Table({
       }
     )));
   }
-  return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => {
-    const meta = header.column.columnDef.meta || {};
-    return /* @__PURE__ */ React.createElement(
-      "th",
-      {
-        key: header.id,
-        className: cn(
-          "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset]",
-          size === "small" && "h-10",
-          meta.headerClassName,
-          meta.align && `text-${meta.align}`
-        ),
-        "data-header": header.id,
-        "data-fixed": getFixed(meta),
-        style: styleColumn(meta, "th"),
-        onClick: header.column.getToggleSortingHandler(),
-        ...typeof meta.headerProps === "object" && meta.headerProps !== null ? meta.headerProps : {}
-      },
-      header.isPlaceholder ? null : flexRender(
-        header.column.columnDef.header,
-        header.getContext()
-      )
-    );
-  })))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("table", { id: "data-table", className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "sticky top-0 z-10 bg-white" }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(
+    "th",
+    {
+      key: header.id,
+      className: cn(
+        "h-12 px-4 [&:has([role=checkbox])]:pr-0 shadow-[0_-1.5px_0px_0px_#c9c9c9_inset] text-left",
+        size === "small" && "h-10",
+        header.column.columnDef.meta?.headerClassName
+      ),
+      "data-header": header.id,
+      "data-fixed": getFixed(header.column.columnDef.meta),
+      style: styleColumn(
+        header.column.columnDef.meta,
+        "th"
+      ),
+      onClick: header.column.getToggleSortingHandler()
+    },
+    header.isPlaceholder ? null : flexRender(
+      header.column.columnDef.header,
+      header.getContext()
+    )
+  ))))), /* @__PURE__ */ React.createElement("tbody", { className: "[&_tr:last-child]:border-0 [&_tr:last-child_td]:shadow-none" }, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
     "tr",
     {
       key: row.id,
       "data-state": onIsSelected?.(row) ? "selected" : "",
       className: "[&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100"
     },
-    row.getVisibleCells().map((cell) => {
-      const meta = cell.column.columnDef.meta || {};
-      return /* @__PURE__ */ React.createElement(
-        "td",
-        {
-          key: cell.id,
-          className: cn(
-            "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset]",
-            meta.cellClassName,
-            meta.align && `text-${meta.align}`
-          ),
-          "data-column": cell.column.id,
-          "data-fixed": getFixed(meta),
-          style: styleColumn(meta, "td"),
-          ...typeof meta.cellProps === "object" && meta.cellProps !== null ? meta.cellProps : {}
-        },
-        flexRender(cell.column.columnDef.cell, cell.getContext())
-      );
-    })
+    row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        key: cell.id,
+        className: "p-4 py-0 h-10 [&:has([role=checkbox])]:pr-0 transition-colors shadow-[0_-0.5px_0px_0px_#c9c9c9_inset] text-left",
+        "data-column": cell.column.id,
+        "data-fixed": getFixed(cell.column.columnDef.meta),
+        style: styleColumn(cell.column.columnDef.meta, "td")
+      },
+      flexRender(cell.column.columnDef.cell, cell.getContext())
+    ))
   )) : /* @__PURE__ */ React.createElement("tr", { className: "border-b-[0.5px] [&_td]:hover:bg-grey-100 [&_td]:data-[state=selected]:bg-grey-100" }, /* @__PURE__ */ React.createElement(
     "td",
     {

package/dist/components/Sheet/Sheet.js

@@ -5,8 +5,6 @@ import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
 
 const Sheet = SheetPrimitive.Root;
-const SheetTrigger = SheetPrimitive.Trigger;
-const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SheetPrimitive.Overlay,
@@ -48,34 +46,6 @@ const SheetContent = React.forwardRef(({ side = "right", className, children, ..
   /* @__PURE__ */ React.createElement(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" }, /* @__PURE__ */ React.createElement(X, { className: "h-4 w-4" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"))
 )));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
-const SheetHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-SheetHeader.displayName = "SheetHeader";
-const SheetFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
-SheetFooter.displayName = "SheetFooter";
 const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SheetPrimitive.Title,
   {
@@ -95,4 +65,4 @@ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
+export { Sheet, SheetContent, SheetDescription, SheetOverlay, SheetPortal, SheetTitle };

package/dist/components/Steps/{StepsTimeline.js → Steps.js}

@@ -97,5 +97,6 @@ const Steps = ({
     ));
   }));
 };
+Steps.displayName = "Steps";
 
 export { Steps };

package/dist/components/Switch/Switch.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils.js';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils.js';
 
 const Spinner = () => /* @__PURE__ */ React.createElement("svg", { className: "animate-spin h-4 w-4 text-blue-600", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement(
   "circle",
@@ -24,19 +24,34 @@ const Spinner = () => /* @__PURE__ */ React.createElement("svg", { className: "a
 const Switch = React.forwardRef(({ className, loading = false, disabled, ...props }, ref) => /* @__PURE__ */ React.createElement(
   SwitchPrimitives.Root,
   {
+    ref,
+    disabled: disabled || loading,
     className: cn(
-      "peer flex items-center shrink-0 h-6 w-12 p-[2px] group rounded-full cursor-pointer bg-transparent focus:outline-none transition-colors data-[state=unchecked]:border-2 data-[state=unchecked]:border-grey-400 data-[state=unchecked]:hover:border-grey-500 data-[state=unchecked]:active:border-grey-700 data-[state=unchecked]:disabled:border-grey-300 data-[state=checked]:bg-blue-600 data-[state=checked]:hover:bg-blue-700 data-[state=checked]:active:bg-blue-800 data-[state=checked]:disabled:bg-blue-200 disabled:cursor-not-allowed",
+      "peer flex items-center shrink-0 h-6 w-12 p-[2px] group rounded-full cursor-pointer bg-transparent focus:outline-none transition-colors",
+      "data-[state=unchecked]:border-2 data-[state=unchecked]:border-grey-400",
+      "data-[state=unchecked]:hover:border-grey-500 data-[state=unchecked]:active:border-grey-700",
+      "data-[state=unchecked]:disabled:border-grey-300",
+      "data-[state=checked]:bg-blue-600 data-[state=checked]:hover:bg-blue-700",
+      "data-[state=checked]:active:bg-blue-800 data-[state=checked]:disabled:bg-blue-200",
+      "disabled:cursor-not-allowed",
       className
     ),
-    ref,
-    disabled: disabled || loading,
     ...props
   },
   /* @__PURE__ */ React.createElement(
     SwitchPrimitives.Thumb,
     {
       className: cn(
-        "pointer-events-none rounded-full shadow-sm transition-all h-4 w-4 data-[state=unchecked]:bg-grey-400 data-[state=unchecked]:translate-x-1 group-hover:data-[state=unchecked]:bg-grey-500 group-focus:ring-8 group-focus:ring-blue-200 group-focus:ring-opacity-50 group-active:group-enabled:h-5 group-active:group-enabled:w-5 group-active:data-[state=unchecked]:bg-grey-700 group-active:group-enabled:data-[state=unchecked]:translate-x-[-2px] group-disabled:data-[state=unchecked]:bg-grey-300 group-disabled:data-[state=unchecked]:bg-opacity-65 data-[state=checked]:bg-white data-[state=checked]:translate-x-6 flex items-center justify-center"
+        "pointer-events-none rounded-full shadow-sm transition-all h-4 w-4",
+        "data-[state=unchecked]:bg-grey-400 data-[state=unchecked]:translate-x-1",
+        "group-hover:data-[state=unchecked]:bg-grey-500",
+        "group-focus:ring-8 group-focus:ring-blue-200 group-focus:ring-opacity-50",
+        "group-active:group-enabled:h-5 group-active:group-enabled:w-5",
+        "group-active:data-[state=unchecked]:bg-grey-700",
+        "group-active:group-enabled:data-[state=unchecked]:translate-x-[-2px]",
+        "group-disabled:data-[state=unchecked]:bg-grey-300 group-disabled:data-[state=unchecked]:bg-opacity-65",
+        "data-[state=checked]:bg-white data-[state=checked]:translate-x-6",
+        "flex items-center justify-center"
       )
     },
     loading && /* @__PURE__ */ React.createElement(Spinner, null)

package/dist/components/TagInput/TagInput.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { cn } from '../../lib/utils.js';
 import { X } from 'lucide-react';
-import { inputVariants } from '../Input/Input.js';
+import { cn } from '../../lib/utils.js';
 import { Tag } from '../Tag/Tag.js';
+import { textareaVariants } from '../Textarea/Textarea.js';
 import { Typography } from '../Typography/Typography.js';
 
-const TagInput = ({
+function TagInput({
   value,
   onRemove,
   placeholder = "Nenhum item selecionado",
@@ -16,71 +16,67 @@ const TagInput = ({
   variant = "default",
   radius = "default",
   ...props
-}) => {
-  const containerRef = React.useRef(null);
-  const [visibleCount, setVisibleCount] = React.useState(value.length);
+}) {
+  const ref = React.useRef(null);
+  const [maxVisibleCount, setMaxVisibleCount] = React.useState(
+    null
+  );
   const [hiddenCount, setHiddenCount] = React.useState(0);
-  const tagsToShow = visibleCount === 0 && value.length > 0 ? value : value.slice(0, visibleCount);
-  React.useEffect(() => {
-    setVisibleCount(value.length);
-    setHiddenCount(0);
-  }, [value.length]);
+  const calculateMaxVisible = React.useCallback(() => {
+    const container = ref.current;
+    if (!container) return;
+    const children = Array.from(container.children).filter(
+      (el) => el.dataset.tag === "true"
+    );
+    const lines = [];
+    children.forEach((c) => {
+      const t = c.offsetTop;
+      if (!lines.includes(t)) lines.push(t);
+    });
+    if (lines.length <= 2) {
+      setMaxVisibleCount(children.length);
+      setHiddenCount(0);
+      return;
+    }
+    const second = lines[1];
+    let count = 0;
+    for (const c of children) {
+      if (c.offsetTop > second) break;
+      count++;
+    }
+    setMaxVisibleCount(count);
+    setHiddenCount(children.length - count);
+  }, []);
   React.useLayoutEffect(() => {
-    const timer = setTimeout(() => {
-      if (!containerRef.current) {
-        setVisibleCount(value.length);
-        setHiddenCount(0);
-        return;
-      }
-      const children = Array.from(containerRef.current.children).filter(
-        (el) => el.dataset && el.dataset["tag"] === "true"
-      );
-      if (children.length === 0) {
-        setVisibleCount(value.length);
-        setHiddenCount(0);
-        return;
-      }
-      const lines = [];
-      children.forEach((child) => {
-        const top = child.offsetTop;
-        if (!lines.includes(top)) lines.push(top);
-      });
-      if (lines.length <= 2) {
-        setVisibleCount(value.length);
-        setHiddenCount(0);
-      } else {
-        const lastLine = lines[1];
-        let count = 0;
-        for (let i = 0; i < children.length; i++) {
-          if (children[i].offsetTop > lastLine) break;
-          count++;
-        }
-        setVisibleCount(count);
-        setHiddenCount(value.length - count);
-      }
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [value, size, variant, radius, className]);
-  const handleRemoveHidden = () => {
-    const hidden = value.slice(visibleCount);
-    hidden.forEach((item) => onRemove(item.value));
-  };
+    if (maxVisibleCount === null) {
+      const id = window.requestAnimationFrame(calculateMaxVisible);
+      return () => window.cancelAnimationFrame(id);
+    }
+  }, [maxVisibleCount, calculateMaxVisible]);
+  const visibleCount = maxVisibleCount === null ? value.length : maxVisibleCount;
+  const displayTags = value.slice(0, visibleCount);
+  const currentHiddenCount = Math.max(value.length - visibleCount, 0);
+  React.useEffect(() => {
+    setHiddenCount(currentHiddenCount);
+  }, [currentHiddenCount]);
+  const textareaRadius = radius === "full" ? "large" : radius;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: containerRef,
+      ref,
       className: cn(
-        inputVariants({ size, variant, radius }),
+        textareaVariants({ variant, radius: textareaRadius }),
         "flex flex-wrap items-start min-h-10 gap-1 py-2 px-3",
         disabled && "opacity-50 pointer-events-none",
         className
       ),
       tabIndex: 0,
       "aria-disabled": disabled,
+      style: { resize: "none", cursor: disabled ? "not-allowed" : "text" },
       ...props
     },
     value.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-400" }, placeholder),
-    tagsToShow.map((item) => /* @__PURE__ */ React.createElement(Tag, { key: item.value, color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
+    displayTags.map((item) => /* @__PURE__ */ React.createElement(Tag, { key: item.value, "data-tag": "true", color: "blue" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, item.label), !readOnly && /* @__PURE__ */ React.createElement(
       X,
       {
         className: "w-4 h-4 cursor-pointer",
@@ -92,19 +88,20 @@ const TagInput = ({
         tabIndex: 0
       }
     ))),
-    hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tag, { color: "blue", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-blue-600" }, "+", hiddenCount), !readOnly && /* @__PURE__ */ React.createElement(
+    hiddenCount > 0 && /* @__PURE__ */ React.createElement(Tag, { color: "grey", "data-tag": "true" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body-small-400", className: "text-grey-600" }, "+", hiddenCount), !readOnly && /* @__PURE__ */ React.createElement(
       X,
       {
-        className: "w-4 h-4 cursor-pointer",
+        className: "w-4 h-4 cursor-pointer text-grey-500 hover:text-grey-700",
         onClick: (e) => {
           e.stopPropagation();
-          handleRemoveHidden();
+          const next = value[visibleCount]?.value;
+          if (next) onRemove(next);
         },
-        "aria-label": `Remover tags ocultas`,
+        "aria-label": "Remover pr\xF3xima tag oculta",
         tabIndex: 0
       }
     ))
   );
-};
+}
 
 export { TagInput };