@mlw-packages/react-components 1.5.9 → 1.6.1

package/dist/index.js

@@ -485,6 +485,7 @@ var require_colors2 = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AddButton: () => AddButton,
   AlertDialogActionBase: () => AlertDialogActionBase,
   AlertDialogBase: () => AlertDialogBase,
   AlertDialogCancelBase: () => AlertDialogCancelBase,
@@ -499,6 +500,7 @@ __export(index_exports, {
   AvatarBase: () => AvatarBase,
   AvatarFallbackBase: () => AvatarFallbackBase,
   AvatarImageBase: () => AvatarImageBase,
+  BackButton: () => BackButton,
   BadgeBase: () => BadgeBase,
   BarChart: () => BarChart_default,
   BreadcrumbBase: () => BreadcrumbBase,
@@ -522,9 +524,12 @@ __export(index_exports, {
   CarouselItemBase: () => CarouselItemBase,
   CarouselNextBase: () => CarouselNextBase,
   CarouselPrevious: () => CarouselPrevious,
+  ChangeButton: () => ChangeButton,
   Chart: () => Chart_default,
+  CheckButton: () => CheckButton,
   CheckboxBase: () => CheckboxBase,
   CloseAllButton: () => CloseAllButton_default,
+  CloseButton: () => CloseButton,
   CollapsibleBase: () => CollapsibleBase,
   CollapsibleContentBase: () => CollapsibleContentBase,
   CollapsibleTriggerBase: () => CollapsibleTriggerBase,
@@ -553,7 +558,9 @@ __export(index_exports, {
   ContextMenuSubContentBase: () => ContextMenuSubContentBase,
   ContextMenuSubTriggerBase: () => ContextMenuSubTriggerBase,
   ContextMenuTriggerBase: () => ContextMenuTriggerBase,
+  CopyButton: () => CopyButton,
   DateTimePicker: () => DateTimePicker,
+  DeleteButton: () => DeleteButton,
   DestructiveDialog: () => DestructiveDialog,
   DialogBase: () => DialogBase,
   DialogCloseBase: () => DialogCloseBase,
@@ -565,6 +572,7 @@ __export(index_exports, {
   DialogPortalBase: () => DialogPortalBase,
   DialogTitleBase: () => DialogTitleBase,
   DialogTriggerBase: () => DialogTriggerBase,
+  DownloadButton: () => DownloadButton,
   DraggableTooltip: () => DraggableTooltip_default,
   DrawerBase: () => DrawerBase,
   DrawerCloseBase: () => DrawerCloseBase,
@@ -591,6 +599,11 @@ __export(index_exports, {
   DropDownMenuSubContentBase: () => DropDownMenuSubContentBase,
   DropDownMenuSubTriggerBase: () => DropDownMenuSubTriggerBase,
   DropDownMenuTriggerBase: () => DropDownMenuTriggerBase,
+  EditButton: () => EditButton,
+  FavoriteButton: () => FavoriteButton,
+  FileUploader: () => FileUploader,
+  FilterButton: () => FilterButton,
+  HideButton: () => HideButton,
   Highlights: () => Highlights_default,
   HoverCardBase: () => HoverCardBase,
   HoverCardContentBase: () => HoverCardContentBase,
@@ -601,9 +614,22 @@ __export(index_exports, {
   InputOTPSeparatorBase: () => InputOTPSeparatorBase,
   InputOTPSlotBase: () => InputOTPSlotBase,
   LabelBase: () => LabelBase_default,
+  LikeButton: () => LikeButton,
   LineChart: () => LineChart_default,
   LoadingBase: () => LoadingBase,
+  LockButton: () => LockButton,
+  ModalBase: () => ModalBase,
+  ModalCloseBase: () => ModalCloseBase,
+  ModalContentBase: () => ModalContentBase,
+  ModalDescriptionBase: () => ModalDescriptionBase,
+  ModalFooterBase: () => ModalFooterBase,
+  ModalHeaderBase: () => ModalHeaderBase,
+  ModalOverlayBase: () => ModalOverlayBase,
+  ModalPortalBase: () => ModalPortalBase,
+  ModalTitleBase: () => ModalTitleBase,
+  ModalTriggerBase: () => ModalTriggerBase,
   ModeToggleBase: () => ModeToggleBase,
+  MoreButton: () => MoreButton,
   MultiCombobox: () => MultiCombobox,
   NavigationMenuBase: () => NavigationMenuBase,
   NavigationMenuContentBase: () => NavigationMenuContentBase,
@@ -613,6 +639,7 @@ __export(index_exports, {
   NavigationMenuListBase: () => NavigationMenuListBase,
   NavigationMenuTriggerBase: () => NavigationMenuTriggerBase,
   NavigationMenuViewportBase: () => NavigationMenuViewportBase,
+  NotificationButton: () => NotificationButton,
   PeriodsDropdown: () => PeriodsDropdown_default,
   PieChart: () => PieChart_default,
   PopoverAnchorBase: () => PopoverAnchorBase,
@@ -623,8 +650,11 @@ __export(index_exports, {
   ProgressCirclesBase: () => ProgressCirclesBase,
   ProgressPanelsBase: () => ProgressPanelsBase,
   ProgressSegmentsBase: () => ProgressSegmentsBase,
+  RefreshButton: () => RefreshButton,
+  SaveButton: () => SaveButton,
   ScrollAreaBase: () => ScrollAreaBase,
   ScrollBarBase: () => ScrollBarBase,
+  SearchButton: () => SearchButton,
   Select: () => Select,
   SelectBase: () => SelectBase,
   SelectContentBase: () => SelectContentBase,
@@ -637,6 +667,7 @@ __export(index_exports, {
   SelectTriggerBase: () => SelectTriggerBase,
   SelectValueBase: () => SelectValueBase,
   SeparatorBase: () => SeparatorBase,
+  SettingsButton: () => SettingsButton,
   SheetBase: () => SheetBase,
   SheetCloseBase: () => SheetCloseBase,
   SheetContentBase: () => SheetContentBase,
@@ -697,7 +728,11 @@ __export(index_exports, {
   TooltipSimple: () => TooltipSimple_default,
   TooltipTriggerBase: () => TooltipTriggerBase,
   TooltipWithTotal: () => TooltipWithTotal_default,
+  UnlockButton: () => UnlockButton,
+  UploadButton: () => UploadButton,
   UseSideBarBase: () => UseSideBarBase,
+  ViewButton: () => ViewButton,
+  VisibilityButton: () => VisibilityButton,
   badgeVariants: () => badgeVariants,
   buttonVariantsBase: () => buttonVariantsBase,
   compactTick: () => compactTick,
@@ -741,6 +776,7 @@ var buttonVariantsBase = (0, import_class_variance_authority.cva)(
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-background/95",
+        select: "box-border border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:hover:bg-background/95",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline"
@@ -749,7 +785,8 @@ var buttonVariantsBase = (0, import_class_variance_authority.cva)(
         default: "h-9 py-2 px-4 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
+        icon: "size-9",
+        select: "h-[34px] py-[7px] px-4 has-[>svg]:px-3"
       }
     },
     defaultVariants: {
@@ -759,7 +796,14 @@ var buttonVariantsBase = (0, import_class_variance_authority.cva)(
   }
 );
 var ButtonBase = React.forwardRef(
-  ({ className, variant, size, asChild = false, testid = `button-${variant ?? "default"}`, ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    testid = `button-${variant ?? "default"}`,
+    ...props
+  }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Comp,
@@ -1818,7 +1862,7 @@ var CommandItemBase = React9.forwardRef(({ className, testid: dataTestId = "comm
   {
     ref,
     className: cn(
-      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-background data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
+      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all data-[disabled=true]:pointer-events-none data-[selected=true]:bg-muted data-[selected=true]:text-primary data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:scale-[1.02] active:scale-[0.98]",
       className
     ),
     "data-testid": dataTestId,
@@ -2426,19 +2470,22 @@ var PopoverContentBase = React13.forwardRef(({ className, align = "center", side
 PopoverContentBase.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/selects/ComboboxBase.tsx
-var import_react10 = require("@phosphor-icons/react");
-var import_react11 = require("react");
+var import_framer_motion4 = require("framer-motion");
+var import_react10 = require("react");
+var import_react11 = require("@phosphor-icons/react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ComboboxBase({
   items,
   renderSelected,
   handleSelection,
   checkIsSelected,
+  keepOpen = false,
+  closeAll,
   searchPlaceholder,
   errorMessage,
   testIds = {}
 }) {
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react10.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
@@ -2453,17 +2500,27 @@ function ComboboxBase({
             children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               ButtonBase,
               {
-                variant: "outline",
+                variant: "select",
+                size: "select",
                 role: "combobox",
                 "aria-expanded": open,
                 className: cn(
-                  "flex items-start gap-2 justify-between",
+                  "flex items-center gap-2 justify-between h-auto [&>div]:line-clamp-1 [&>span]:line-clamp-1",
                   errorMessage && "border-red-500"
                 ),
                 "data-testid": testIds.trigger ?? "combobox-trigger",
                 children: [
                   renderSelected,
-                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react10.CaretDownIcon, { size: 16, className: "mt-0.5" })
+                  closeAll,
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    import_framer_motion4.motion.div,
+                    {
+                      animate: { rotate: open ? 180 : 0 },
+                      transition: { duration: 0.3 },
+                      className: "flex",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react11.CaretDownIcon, { className: " flex-shrink-0" })
+                    }
+                  )
                 ]
               }
             )
@@ -2477,7 +2534,7 @@ function ComboboxBase({
             children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               CommandBase,
               {
-                className: "dark:text-white",
+                className: "dark:text-white hover:bg-rsecondary",
                 "data-testid": testIds.command ?? "combobox-command",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -2499,19 +2556,32 @@ function ComboboxBase({
                           value: item.value,
                           onSelect: (value) => {
                             handleSelection(value);
-                            setOpen(false);
+                            if (!keepOpen) setOpen(false);
                           },
                           "data-testid": testIds.option ?? "combobox-option",
                           children: [
                             item.label,
                             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-                              import_react10.CheckIcon,
+                              import_framer_motion4.motion.div,
                               {
-                                className: cn(
-                                  "ml-auto",
-                                  isSelected ? "opacity-100" : "opacity-0"
-                                ),
-                                "data-testid": isSelected ? testIds.check ?? "combobox-option-check" : void 0
+                                initial: { scale: 0 },
+                                animate: { scale: isSelected ? 1 : 0 },
+                                transition: {
+                                  type: "spring",
+                                  stiffness: 500,
+                                  damping: 30
+                                },
+                                className: "ml-auto ",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                                  import_react11.CheckIcon,
+                                  {
+                                    className: cn(
+                                      "ml-auto",
+                                      isSelected ? "opacity-100" : "opacity-0"
+                                    ),
+                                    "data-testid": isSelected ? testIds.check ?? "combobox-option-check" : void 0
+                                  }
+                                )
                               }
                             )
                           ]
@@ -2583,6 +2653,7 @@ function Combobox({
 // src/components/selects/MultiCombobox.tsx
 var import_react13 = require("react");
 var import_react14 = require("@phosphor-icons/react");
+var import_framer_motion5 = require("framer-motion");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function MultiCombobox({
   items,
@@ -2593,7 +2664,8 @@ function MultiCombobox({
   searchPlaceholder,
   label,
   labelClassname,
-  testIds = {}
+  testIds = {},
+  keepOpen = true
 }) {
   const selectedItems = items.filter((item) => selected.includes(item.value));
   const checkIsSelected = (0, import_react13.useCallback)(
@@ -2611,13 +2683,27 @@ function MultiCombobox({
     },
     [selected, onChange]
   );
+  const closeAll = selectedItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: " flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    ButtonBase,
+    {
+      variant: "ghost",
+      "data-testid": testIds.clearAll ?? "combobox-clear-all",
+      size: "icon",
+      onClick: (e) => {
+        e.stopPropagation();
+        onChange([]);
+      },
+      className: "text-xs  hover:bg-red-50 hover:text-red-500 transition-colors rounded-md mr-2",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react14.XIcon, {})
+    }
+  ) }) : null;
   const renderSelected = (0, import_react13.useMemo)(() => {
     if (selectedItems.length === 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "span",
         {
           "data-testid": testIds.emptyPlaceholder ?? "combobox-selected-empty",
-          className: "text-gray-500",
+          className: "text-gray-500 truncate",
           children: placeholder ?? "Selecione uma op\xE7\xE3o..."
         }
       );
@@ -2626,16 +2712,25 @@ function MultiCombobox({
       "div",
       {
         "data-testid": testIds.selectedWrapper ?? "combobox-selected-wrapper",
-        className: "flex w-full flex-wrap gap-2",
-        children: selectedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-          "div",
+        className: "flex w-full flex-wrap gap-2 overflow-hidden pr-1.5",
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_framer_motion5.AnimatePresence, { mode: "popLayout", children: selectedItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          import_framer_motion5.motion.div,
           {
-            className: "flex items-center gap-1 rounded-md border p-1",
+            layout: true,
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0, opacity: 0 },
+            transition: {
+              type: "spring",
+              stiffness: 500,
+              damping: 30
+            },
+            className: "flex items-center justify-between gap-2 my-1 rounded-md border p-1 max-w-full",
             "data-testid": testIds.selectedItem?.(item.value) ?? `combobox-selected-${item.value}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "whitespace-break-spaces text-xs", children: item.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-xs truncate", children: item.label }),
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                "span",
+                import_framer_motion5.motion.span,
                 {
                   role: "button",
                   tabIndex: 0,
@@ -2643,14 +2738,16 @@ function MultiCombobox({
                     e.stopPropagation();
                     handleSelection(item.value);
                   },
-                  className: "cursor-pointer p-0 m-0 text-xs flex items-center justify-center hover:text-red-500 hover:scale-110 transition-all",
+                  whileHover: { scale: 1.1 },
+                  whileTap: { scale: 0.95 },
+                  className: "cursor-pointer p-0.5 text-xs flex items-center justify-center hover:text-red-500 transition-colors flex-shrink-0 rounded hover:bg-red-50 ",
                   children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react14.XIcon, { size: 14 })
                 }
               )
             ]
           },
           item.value
-        ))
+        )) })
       }
     );
   }, [handleSelection, placeholder, selectedItems, testIds]);
@@ -2675,6 +2772,8 @@ function MultiCombobox({
             renderSelected,
             handleSelection,
             checkIsSelected,
+            keepOpen,
+            closeAll,
             searchPlaceholder
           }
         )
@@ -3131,7 +3230,7 @@ var import_jsx_runtime28 = require("react/jsx-runtime");
 var ProgressBase = React17.forwardRef(
   ({
     className,
-    value,
+    value: rawValue,
     label,
     leftIcon,
     rightIcon,
@@ -3139,8 +3238,14 @@ var ProgressBase = React17.forwardRef(
     segments = 5,
     steps = [],
     currentStep = 0,
+    showValue = false,
+    valuePosition = "right",
+    autocolor,
+    plusIndicator,
     ...props
   }, ref) => {
+    const value = Number(rawValue || 0);
+    const indicatorWidth = Math.min(value, 100);
     switch (variant) {
       case "segments":
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -3174,26 +3279,89 @@ var ProgressBase = React17.forwardRef(
         return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-1 w-full min-w-[150px]", children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LabelBase_default, { className: "py-2", children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+            showValue && valuePosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-12 text-sm text-right font-extrabold", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             leftIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: leftIcon }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
               ProgressPrimitive.Root,
               {
                 ref,
                 className: cn(
-                  "relative h-3 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800 shadow-inner transition-all",
+                  " relative h-3 w-full overflow-visible rounded-full bg-muted/80 shadow-inner transition-all ",
                   className
                 ),
                 value,
                 ...props,
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  ProgressPrimitive.Indicator,
-                  {
-                    className: "h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out",
-                    style: { transform: `translateX(-${100 - (value || 0)}%)` }
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    ProgressPrimitive.Indicator,
+                    {
+                      className: cn(
+                        "h-full w-full flex-1 transition-all duration-500 ease-in-out rounded-lg  ",
+                        autocolor && autocolor.length >= 2 ? "bg-transparent" : "bg-primary"
+                      ),
+                      style: { transform: `translateX(-${100 - indicatorWidth}%)` }
+                    }
+                  ),
+                  autocolor && Array.isArray(autocolor) && autocolor.length >= 2 && (() => {
+                    const [t1Raw, t2Raw] = autocolor;
+                    const [t1, t2] = [Number(t1Raw), Number(t2Raw)].sort(
+                      (a, b) => a - b
+                    );
+                    const v = Number(value || 0);
+                    let colorClass = "bg-red-500";
+                    if (v <= t1) {
+                      colorClass = "bg-red-500";
+                    } else if (v <= t2) {
+                      colorClass = "bg-yellow-500";
+                    } else {
+                      colorClass = "bg-emerald-500";
+                    }
+                    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: cn(
+                          "absolute top-0 left-0 h-full transition-all duration-500 ease-in-out rounded-lg",
+                          colorClass
+                        ),
+                        style: { width: `${indicatorWidth}%` }
+                      }
+                    );
+                  })(),
+                  plusIndicator && value > 100 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute top-0 bottom-0 w-0.5 bg-black/70 transition-all duration-500 ease-in-out pointer-events-none",
+                      style: {
+                        left: `${100 / value * 100}%`
+                      },
+                      children: value > 115 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute left-full ml-2 top-1/2 -translate-y-1/2 text-xs whitespace-nowrap font-extrabold", children: `+${Math.round(
+                        value - 100
+                      )}%` })
+                    }
+                  ),
+                  showValue && valuePosition === "inside" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                    "span",
+                    {
+                      className: "absolute inset-0 flex items-center justify-center text-sm select-none pointer-events-none text-secondary font-extrabold",
+                      "aria-hidden": true,
+                      children: [
+                        Math.round(value || 0),
+                        "%"
+                      ]
+                    }
+                  )
+                ]
               }
             ),
+            showValue && valuePosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "w-12 text-sm font-extrabold text-left", children: [
+              Math.round(value || 0),
+              "%"
+            ] }),
             rightIcon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center", children: rightIcon })
           ] })
         ] });
@@ -3350,7 +3518,7 @@ ScrollBarBase.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var React19 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_react19 = require("@phosphor-icons/react");
-var import_framer_motion4 = require("framer-motion");
+var import_framer_motion6 = require("framer-motion");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var SelectBase = SelectPrimitive.Root;
 var SelectGroupBase = SelectPrimitive.Group;
@@ -3367,7 +3535,7 @@ var SelectTriggerBase = React19.forwardRef(({ className, children, open, ...prop
     children: [
       children,
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_framer_motion4.motion.span,
+        import_framer_motion6.motion.span,
         {
           animate: { rotate: open ? 180 : 0 },
           transition: { duration: 0.3 },
@@ -3405,43 +3573,51 @@ var SelectScrollDownButtonBase = React19.forwardRef(({ className, ...props }, re
   }
 ));
 SelectScrollDownButtonBase.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContentBase = React19.forwardRef(({ className, children, position = "popper", testid: dataTestId = "select-content", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion4.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-      className
-    ),
-    position,
-    "data-testid": dataTestId,
-    ...props,
-    asChild: true,
-    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_framer_motion4.motion.div,
-      {
-        initial: { opacity: 0, scale: 0.95 },
-        animate: { opacity: 1, scale: 1 },
-        exit: { opacity: 0, scale: 0.95 },
-        transition: { duration: 0.2 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectScrollUpButtonBase, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            SelectPrimitive.Viewport,
-            {
-              className: cn(
-                "p-1",
-                position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-              ),
-              children
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectScrollDownButtonBase, {})
-        ] })
-      }
-    )
-  }
-) }) }));
+var SelectContentBase = React19.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    testid: dataTestId = "select-content",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_framer_motion6.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+        className
+      ),
+      position,
+      "data-testid": dataTestId,
+      ...props,
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_framer_motion6.motion.div,
+        {
+          initial: { opacity: 0, scale: 0.95 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.95 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectScrollUpButtonBase, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              SelectPrimitive.Viewport,
+              {
+                className: cn(
+                  "p-1",
+                  position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+                ),
+                children
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectScrollDownButtonBase, {})
+          ] })
+        }
+      )
+    }
+  ) }) })
+);
 SelectContentBase.displayName = SelectPrimitive.Content.displayName;
 var SelectLabelBase = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   SelectPrimitive.Label,
@@ -3452,19 +3628,36 @@ var SelectLabelBase = React19.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SelectLabelBase.displayName = SelectPrimitive.Label.displayName;
-var SelectItemBase = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+var SelectItemBase = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   SelectPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-colors",
       className
     ),
     ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react19.CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.ItemText, { children })
-    ]
+    asChild: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_framer_motion6.motion.div,
+      {
+        whileHover: { x: 4 },
+        whileTap: { scale: 0.98 },
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            import_framer_motion6.motion.div,
+            {
+              initial: { scale: 0 },
+              animate: { scale: 1 },
+              transition: { type: "spring", stiffness: 500, damping: 30 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react19.CheckIcon, { className: "h-4 w-4" })
+            }
+          ) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectPrimitive.ItemText, { children })
+        ]
+      }
+    )
   }
 ));
 SelectItemBase.displayName = SelectPrimitive.Item.displayName;
@@ -3481,7 +3674,7 @@ SelectSeparatorBase.displayName = SelectPrimitive.Separator.displayName;
 // src/components/ui/SeparatorBase.tsx
 var React20 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_framer_motion5 = require("framer-motion");
+var import_framer_motion7 = require("framer-motion");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var SeparatorBase = React20.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
@@ -3495,7 +3688,7 @@ var SeparatorBase = React20.forwardRef(
         asChild: true,
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_framer_motion5.motion.div,
+          import_framer_motion7.motion.div,
           {
             className: cn(
               "shrink-0 bg-border",
@@ -4546,7 +4739,7 @@ TabsContentBase.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/ui/TextAreaBase.tsx
 var React28 = __toESM(require("react"));
-var import_framer_motion6 = require("framer-motion");
+var import_framer_motion8 = require("framer-motion");
 var import_react23 = require("@phosphor-icons/react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var TextAreaBase = React28.forwardRef(
@@ -4627,7 +4820,7 @@ var TextAreaBase = React28.forwardRef(
           onOpenChange: setShowConfirmTooltip,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTriggerBase, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              import_framer_motion6.motion.button,
+              import_framer_motion8.motion.button,
               {
                 type: "button",
                 initial: { opacity: 0, scale: 0.8 },
@@ -4691,7 +4884,7 @@ var TextAreaBase = React28.forwardRef(
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-        import_framer_motion6.motion.div,
+        import_framer_motion8.motion.div,
         {
           className: "pointer-events-none absolute inset-0 rounded-lg",
           initial: { opacity: 0 },
@@ -4701,7 +4894,7 @@ var TextAreaBase = React28.forwardRef(
         }
       ),
       isFocused && hasContent && props.maxLength && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-        import_framer_motion6.motion.div,
+        import_framer_motion8.motion.div,
         {
           initial: { opacity: 0, y: -10 },
           animate: { opacity: 1, y: 0 },
@@ -4915,7 +5108,7 @@ var import_date_fns = require("date-fns");
 var React30 = __toESM(require("react"));
 var import_react_day_picker2 = require("react-day-picker");
 var import_react27 = require("@phosphor-icons/react");
-var import_framer_motion7 = require("framer-motion");
+var import_framer_motion9 = require("framer-motion");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function CalendarBase2({
   className,
@@ -4937,10 +5130,10 @@ function CalendarBase2({
     "div",
     {
       className: cn(
-        "rounded-md border bg-background p-4 shadow-lg overflow-hidden w-full h-full flex flex-col",
+        "rounded-md border bg-background p-2 overflow-hidden flex flex-col",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_framer_motion7.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex-1 flex flex-col min-h-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_framer_motion9.AnimatePresence, { initial: false, mode: "wait", custom: direction, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "div",
         {
           className: "w-full h-full flex flex-col",
@@ -4980,11 +5173,11 @@ function CalendarBase2({
                 ),
                 day: cn(
                   buttonVariantsBase({ variant: "ghost" }),
-                  "w-full h-full p-0 rounded-lg",
-                  "aria-selected:opacity-100 hover:bg-muted text-[clamp(0.75rem,2vw,1rem)] flex items-center justify-center",
-                  "touch-manipulation transition-all duration-200 ease-out hover:scale-105 active:scale-95"
+                  "w-full h-full p-0",
+                  "aria-selected:opacity-100 hover:bg-muted flex items-center justify-center",
+                  " transition-all duration-200 ease-out hover:scale-105 active:scale-95"
                 ),
-                day_selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold",
+                day_selected: "bg-primary text-primary-foreground hover:bg-primary/90 focus:bg-primary/90 font-semibold hover:text-white",
                 day_today: "bg-muted text-foreground font-bold ring-2 ring-primary/30 ring-inset",
                 day_outside: "day-outside text-muted-foreground/40 opacity-40 aria-selected:bg-muted/50 aria-selected:text-foreground",
                 day_disabled: "text-muted-foreground/30 opacity-40 cursor-not-allowed",
@@ -5012,7 +5205,7 @@ var import_locale = require("date-fns/locale");
 var import_react30 = require("react");
 
 // src/components/date-time-picker/TimePicker.tsx
-var import_framer_motion8 = require("framer-motion");
+var import_framer_motion10 = require("framer-motion");
 var React32 = __toESM(require("react"));
 
 // src/components/date-time-picker/TimePickerInput.tsx
@@ -5384,7 +5577,7 @@ function TimePicker({
     visible: { opacity: 1, y: 0 }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-    import_framer_motion8.motion.div,
+    import_framer_motion10.motion.div,
     {
       variants: containerVariants,
       initial: "hidden",
@@ -5392,7 +5585,7 @@ function TimePicker({
       className: "flex items-end justify-center gap-2 sm:gap-3 p-2 sm:p-3 md:p-4 rounded-lg bg-muted/20 border border-border/50 w-full max-w-full overflow-hidden",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_framer_motion8.motion.div,
+          import_framer_motion10.motion.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
@@ -5410,7 +5603,7 @@ function TimePicker({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_framer_motion8.motion.div,
+          import_framer_motion10.motion.div,
           {
             variants: itemVariants2,
             className: "grid gap-1 sm:gap-2 text-center flex-shrink-0 min-w-0",
@@ -5428,8 +5621,8 @@ function TimePicker({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_framer_motion8.AnimatePresence, { children: !hideSeconds && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          import_framer_motion8.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_framer_motion10.AnimatePresence, { children: !hideSeconds && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_framer_motion10.motion.div,
           {
             variants: itemVariants2,
             initial: "hidden",
@@ -5514,9 +5707,9 @@ function DateTimePicker({
           variant: "outline",
           className: cn(
             "w-full justify-start text-left min-w-0 overflow-hidden",
-            "",
+            "text-foreground/70",
             "text-sm sm:text-base",
-            !date && "text-muted-foreground"
+            !date && "text-muted-foreground/"
           ),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "truncate flex-1", children: date ? (0, import_date_fns.format)(date, getDisplayFormat(), { locale: import_locale.ptBR }) : "Pick a date" }),
@@ -5544,7 +5737,7 @@ function DateTimePicker({
                 initialFocus: true,
                 fromDate,
                 toDate,
-                className: "w-full"
+                className: cn("w-full", hideHour && hideMinute && "border-0")
               }
             ),
             !(hideHour && hideMinute) && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "flex justify-center w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -5570,7 +5763,7 @@ function DateTimePicker({
                       ),
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react31.ClockIcon, { className: "text-primary flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-foreground truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
+                        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-black truncate", children: internalDate ? (0, import_date_fns.format)(internalDate, getTimeFormat() || "HH:mm", {
                           locale: import_locale.ptBR
                         }) : "00:00" })
                       ]
@@ -5619,6 +5812,7 @@ function DateTimePicker({
 }
 
 // src/components/selects/Select.tsx
+var import_framer_motion11 = require("framer-motion");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function Select({
   items,
@@ -5629,53 +5823,77 @@ function Select({
   testIds = {}
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "data-testid": testIds.root ?? "select-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SelectBase, { onValueChange: onChange, "data-testid": testIds.base ?? "select-base", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        SelectTriggerBase,
-        {
-          className: cn(
-            "flex h-12 w-full content-start text-lg shadow-md",
-            errorMessage && "border-red-500"
-          ),
-          "data-testid": testIds.trigger ?? "select-trigger",
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            SelectValueBase,
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      SelectBase,
+      {
+        onValueChange: onChange,
+        "data-testid": testIds.base ?? "select-base",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            SelectTriggerBase,
             {
-              placeholder,
-              "data-testid": testIds.value ?? "select-value"
+              className: cn(
+                "flex h-9 w-full content-start text-lg shadow-md",
+                errorMessage && "border-red-500"
+              ),
+              "data-testid": testIds.trigger ?? "select-trigger",
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                SelectValueBase,
+                {
+                  placeholder,
+                  "data-testid": testIds.value ?? "select-value"
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectLabelBase, { "data-testid": testIds.label ?? "select-label", children: key }),
-        groupItems[key].map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          SelectItemBase,
-          {
-            value: item.value,
-            "data-testid": testIds.item?.(item.value) ?? `select-item-${item.value}`,
-            children: item.label
-          },
-          item.value
-        ))
-      ] }, key)) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        SelectItemBase,
-        {
-          value: item.value,
-          "data-testid": testIds.item?.(item.value) ?? `select-item-${item.value}`,
-          children: item.label
-        },
-        item.value
-      )) }) }) })
-    ] }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      "p",
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: groupItems ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_jsx_runtime48.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            SelectGroupBase,
+            {
+              "data-testid": testIds.group ?? "select-group",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  SelectLabelBase,
+                  {
+                    "data-testid": testIds.label ?? "select-label",
+                    children: key
+                  }
+                ),
+                groupItems[key].map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  SelectItemBase,
+                  {
+                    value: item.value,
+                    "data-testid": testIds.item?.(item.value) ?? `select-item-${item.value}`,
+                    children: item.label
+                  },
+                  item.value
+                ))
+              ]
+            },
+            key
+          )) }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectGroupBase, { "data-testid": testIds.group ?? "select-group", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            SelectItemBase,
+            {
+              value: item.value,
+              "data-testid": testIds.item?.(item.value) ?? `select-item-${item.value}`,
+              children: item.label
+            },
+            item.value
+          )) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_framer_motion11.AnimatePresence, { children: errorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_framer_motion11.motion.p,
       {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
         className: "text-sm text-red-500",
         "data-testid": testIds.error ?? "select-error",
         children: errorMessage
       }
-    )
+    ) })
   ] });
 }
 
@@ -5828,7 +6046,7 @@ var import_sonner2 = require("sonner");
 
 // src/components/charts/components/controls/PeriodsDropdown.tsx
 var import_react32 = require("react");
-var import_framer_motion9 = require("framer-motion");
+var import_framer_motion12 = require("framer-motion");
 var import_ssr = require("@phosphor-icons/react/dist/ssr");
 var import_ssr2 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -5903,8 +6121,8 @@ function PeriodsDropdown({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_framer_motion9.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      import_framer_motion9.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_framer_motion12.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      import_framer_motion12.motion.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -5933,7 +6151,7 @@ function PeriodsDropdown({
               className: "flex flex-col p-2 gap-1",
               style: { maxHeight: 200, overflowY: "auto" },
               children: periods.map((p, idx) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-                import_framer_motion9.motion.button,
+                import_framer_motion12.motion.button,
                 {
                   className: "flex items-center justify-between w-full text-left px-3 py-2.5 rounded focus:outline-none transition-colors " + (activePeriods && activePeriods.includes(p) || p === activePeriod ? "bg-accent/10 font-medium" : "hover:bg-accent/15 focus-visible:ring-2 focus-visible:ring-accent/30"),
                   variants: itemVariants,
@@ -5961,7 +6179,7 @@ function PeriodsDropdown({
 var PeriodsDropdown_default = PeriodsDropdown;
 
 // src/components/charts/components/controls/ShowOnly.tsx
-var import_framer_motion10 = require("framer-motion");
+var import_framer_motion13 = require("framer-motion");
 var import_react33 = require("@phosphor-icons/react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var ShowOnly = ({
@@ -5972,7 +6190,7 @@ var ShowOnly = ({
   const hasHighlights = highlightedSeriesSize > 0;
   if (!hasHighlights) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ml-auto flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_framer_motion10.motion.div,
+    import_framer_motion13.motion.div,
     {
       whileTap: { scale: hasHighlights ? 0.985 : 1 },
       whileHover: { y: hasHighlights ? -2 : 0 },
@@ -6005,7 +6223,7 @@ var ShowOnly = ({
 var ShowOnly_default = ShowOnly;
 
 // src/components/charts/components/controls/Highlights.tsx
-var import_framer_motion11 = require("framer-motion");
+var import_framer_motion14 = require("framer-motion");
 var import_ssr3 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var Highlights = ({
@@ -6026,13 +6244,13 @@ var Highlights = ({
     visible: { opacity: 1, transition: { staggerChildren: 0.03 } }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_framer_motion11.motion.div,
+    import_framer_motion14.motion.div,
     {
       className: "flex-1 flex items-center gap-2 flex-wrap",
       initial: "hidden",
       animate: "visible",
       variants: containerVariants,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion11.AnimatePresence, { initial: false, mode: "popLayout", children: allKeys.map((k) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion14.AnimatePresence, { initial: false, mode: "popLayout", children: allKeys.map((k) => {
         const isHighlighted = highlightedSeries.has(k);
         const label = mapperConfig[k]?.label ?? k;
         const color = finalColors[k];
@@ -6042,7 +6260,7 @@ var Highlights = ({
           isHighlighted ? "bg-card/95 border-2 text-foreground shadow-[0_6px_18px_rgba(0,0,0,0.12)]" : "bg-muted/10 border-border text-muted-foreground hover:bg-muted/5"
         );
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_framer_motion11.motion.div,
+          import_framer_motion14.motion.div,
           {
             layout: true,
             initial: "hidden",
@@ -6059,7 +6277,7 @@ var Highlights = ({
                 style: { minWidth: showFullLabel ? void 0 : 36 },
                 "aria-pressed": isHighlighted,
                 children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-                  import_framer_motion11.motion.button,
+                  import_framer_motion14.motion.button,
                   {
                     whileHover: { scale: isHighlighted ? 1.04 : 1.03 },
                     whileTap: { scale: 0.96 },
@@ -6067,7 +6285,7 @@ var Highlights = ({
                     className: "flex items-center gap-2 min-w-0 pr-2",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion11.motion.span,
+                        import_framer_motion14.motion.span,
                         {
                           className: cn("w-3 h-3 rounded-sm flex-shrink-0 border"),
                           style: {
@@ -6081,8 +6299,8 @@ var Highlights = ({
                           transition: { type: "spring", stiffness: 400, damping: 30 }
                         }
                       ),
-                      showFullLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion11.motion.span, { className: "truncate max-w-[10rem] pr-2", layout: true, children: label }) : showShortLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion11.motion.span,
+                      showFullLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_framer_motion14.motion.span, { className: "truncate max-w-[10rem] pr-2", layout: true, children: label }) : showShortLabel ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        import_framer_motion14.motion.span,
                         {
                           className: "truncate max-w-[6rem] text-xs pr-2",
                           layout: true,
@@ -6090,7 +6308,7 @@ var Highlights = ({
                         }
                       ) : null,
                       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        import_framer_motion11.motion.span,
+                        import_framer_motion14.motion.span,
                         {
                           "aria-hidden": true,
                           initial: { opacity: 0, scale: 0.6 },
@@ -6200,7 +6418,7 @@ var CloseAllButton_default = CloseAllButton;
 
 // src/components/charts/components/tooltips/DraggableTooltip.tsx
 var import_react34 = __toESM(require("react"));
-var import_framer_motion12 = require("framer-motion");
+var import_framer_motion15 = require("framer-motion");
 var import_react35 = require("@phosphor-icons/react");
 var import_ssr5 = require("@phosphor-icons/react/dist/ssr");
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -6575,7 +6793,7 @@ var DraggableTooltipComponent = ({
       );
       return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion12.motion.div,
+          import_framer_motion15.motion.div,
           {
             className: "fixed pointer-events-none z-30",
             variants: guideVariants,
@@ -6597,7 +6815,7 @@ var DraggableTooltipComponent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion12.motion.div,
+          import_framer_motion15.motion.div,
           {
             className: "fixed pointer-events-none z-31",
             variants: guideDotVariants,
@@ -6616,7 +6834,7 @@ var DraggableTooltipComponent = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          import_framer_motion12.motion.div,
+          import_framer_motion15.motion.div,
           {
             className: "fixed pointer-events-none z-31",
             variants: guideDotVariants,
@@ -6636,8 +6854,8 @@ var DraggableTooltipComponent = ({
         )
       ] }, index);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_framer_motion12.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-      import_framer_motion12.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_framer_motion15.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      import_framer_motion15.motion.div,
       {
         className: "fixed bg-card border border-border rounded-lg shadow-lg z-50 min-w-80 select-none",
         variants: tooltipVariants,
@@ -9152,14 +9370,1363 @@ var useChartHighlights = () => {
   };
 };
 
+// src/components/ui/SmallButtons.tsx
+var React38 = __toESM(require("react"));
+var import_react40 = require("@phosphor-icons/react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var EditButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-edit",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.PencilSimpleIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:-rotate-12"
+        }
+      )
+    }
+  )
+);
+EditButton.displayName = "EditButton";
+var ChangeButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-edit",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.ArrowsLeftRightIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:-rotate-180"
+        }
+      )
+    }
+  )
+);
+ChangeButton.displayName = "ChangeButton";
+var SaveButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-save",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out group",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.FloppyDiskIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-200 group-hover:scale-110"
+        }
+      )
+    }
+  )
+);
+SaveButton.displayName = "SaveButton";
+var AddButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-add",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "default",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out",
+        "hover:scale-105",
+        "active:scale-95",
+        "disabled:hover:scale-100",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.PlusIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-300"
+        }
+      )
+    }
+  )
+);
+AddButton.displayName = "AddButton";
+var CloseButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-close",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "ghost",
+    size = "icon",
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    ButtonBase,
+    {
+      ref,
+      variant,
+      size,
+      onClick,
+      disabled,
+      testid,
+      className: cn(
+        "transition-all duration-200 ease-in-out",
+        "hover:scale-110 hover:rotate-90 hover:bg-destructive/10",
+        "active:scale-95 active:rotate-0",
+        "disabled:hover:scale-100 disabled:hover:rotate-0",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        import_react40.XIcon,
+        {
+          size: iconSize,
+          color: iconColor,
+          className: "transition-transform duration-300"
+        }
+      )
+    }
+  )
+);
+CloseButton.displayName = "CloseButton";
+var DeleteButton = React38.forwardRef(
+  ({
+    disabled,
+    onClick,
+    testid = "button-delete",
+    className,
+    iconSize = 18,
+    iconColor,
+    variant = "destructive",
+    size = "icon",
+    destructiveTitle,
+    destructiveDescription,
+    destructiveOnConfirm,
+    destructiveOnCancel,
+    destructiveTriggerContent,
+    ...props
+  }, ref) => {
+    const effectiveDestructiveTitle = destructiveTitle ?? props.title;
+    const trigger = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      ButtonBase,
+      {
+        ref,
+        variant,
+        size,
+        onClick,
+        disabled,
+        testid,
+        className: cn(
+          "transition-all duration-200 ease-in-out group",
+          "hover:scale-105",
+          "active:scale-95",
+          "disabled:hover:scale-100",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_react40.TrashIcon,
+          {
+            size: iconSize,
+            color: iconColor,
+            className: "transition-transform duration-200 group-hover:scale-110"
+          }
+        )
+      }
+    );
+    if (effectiveDestructiveTitle) {
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        DestructiveDialog,
+        {
+          title: effectiveDestructiveTitle,
+          description: destructiveDescription ?? "Essa a\xE7\xE3o \xE9 irrevers\xEDvel.",
+          onConfirm: destructiveOnConfirm ?? (() => {
+          }),
+          onCancel: destructiveOnCancel,
+          triggerContent: destructiveTriggerContent,
+          children: trigger
+        }
+      );
+    }
+    return trigger;
+  }
+);
+DeleteButton.displayName = "DeleteButton";
+var DownloadButton = ({
+  disabled,
+  onClick,
+  testid = "button-download",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "outline",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.DownloadSimpleIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-300 group-hover:translate-y-0.5"
+      }
+    )
+  }
+);
+var UploadButton = ({
+  disabled,
+  onClick,
+  testid = "button-upload",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "outline",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.UploadSimpleIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-300 group-hover:-translate-y-0.5"
+      }
+    )
+  }
+);
+var CopyButton = ({
+  disabled,
+  onClick,
+  testid = "button-copy",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-90",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.CopyIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-200 group-hover:scale-110"
+      }
+    )
+  }
+);
+var RefreshButton = ({
+  disabled,
+  onClick,
+  testid = "button-refresh",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.ArrowClockwiseIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-500 group-hover:rotate-180"
+      }
+    )
+  }
+);
+var SearchButton = ({
+  disabled,
+  onClick,
+  testid = "button-search",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "outline",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.MagnifyingGlassIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-200 group-hover:scale-110 group-hover:-rotate-12"
+      }
+    )
+  }
+);
+var BackButton = ({
+  disabled,
+  onClick,
+  testid = "button-back",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.ArrowLeftIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-300 group-hover:-translate-x-1"
+      }
+    )
+  }
+);
+var SettingsButton = ({
+  disabled,
+  onClick,
+  testid = "button-settings",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.GearIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-500 group-hover:rotate-90"
+      }
+    )
+  }
+);
+var NotificationButton = ({
+  disabled,
+  onClick,
+  testid = "button-notification",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.BellIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-12"
+      }
+    )
+  }
+);
+var MoreButton = ({
+  disabled,
+  onClick,
+  testid = "button-more",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "ghost",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.DotsThreeIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-200 group-hover:scale-110"
+      }
+    )
+  }
+);
+var CheckButton = ({
+  disabled,
+  onClick,
+  testid = "button-check",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: "default",
+    size: "icon",
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-110",
+      "active:scale-95",
+      "disabled:hover:scale-100"
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.CheckIcon,
+      {
+        size: 18,
+        className: "transition-transform duration-200 group-hover:scale-110"
+      }
+    )
+  }
+);
+var FilterButton = ({
+  disabled,
+  onClick,
+  testid = "button-filter",
+  active = false,
+  className,
+  iconSize = 18,
+  iconColor,
+  variant,
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant: variant || (active ? "default" : "outline"),
+    size,
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.FunnelIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        weight: active ? "fill" : "regular",
+        className: "transition-all duration-200"
+      }
+    )
+  }
+);
+var LikeButton = ({
+  disabled,
+  onClick,
+  testid = "button-like",
+  isLiked = false,
+  className,
+  iconSize = 18,
+  iconColor,
+  variant = "ghost",
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant,
+    size,
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-110",
+      "active:scale-95",
+      "disabled:hover:scale-100",
+      !iconColor && (isLiked ? "text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300" : "hover:text-red-500 dark:hover:text-red-400"),
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.HeartIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        weight: isLiked ? "fill" : "regular",
+        className: "transition-all duration-300 group-hover:scale-110"
+      }
+    )
+  }
+);
+var FavoriteButton = ({
+  disabled,
+  onClick,
+  testid = "button-favorite",
+  isFavorite = false,
+  className,
+  iconSize = 18,
+  iconColor,
+  variant = "ghost",
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant,
+    size,
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-110",
+      "active:scale-95",
+      "disabled:hover:scale-100",
+      !iconColor && (isFavorite ? "text-yellow-500 dark:text-yellow-400 hover:text-yellow-600 dark:hover:text-yellow-300" : "hover:text-yellow-500 dark:hover:text-yellow-400"),
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.StarIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        weight: isFavorite ? "fill" : "regular",
+        className: "transition-all duration-300 group-hover:rotate-12"
+      }
+    )
+  }
+);
+var VisibilityButton = ({
+  disabled,
+  onClick,
+  testid = "button-visibility",
+  isVisible = true,
+  className,
+  iconSize = 18,
+  iconColor,
+  variant = "ghost",
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant,
+    size,
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100",
+      className
+    ),
+    ...props,
+    children: isVisible ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.EyeIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        className: "transition-opacity duration-200"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.EyeSlashIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        className: "transition-opacity duration-200"
+      }
+    )
+  }
+);
+var ViewButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VisibilityButton, { isVisible: true, testid: "button-view", ...props });
+var HideButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VisibilityButton, { isVisible: false, testid: "button-hide", ...props });
+var LockButton = ({
+  disabled,
+  onClick,
+  testid = "button-lock",
+  isLocked = true,
+  className,
+  iconSize = 18,
+  iconColor,
+  variant = "ghost",
+  size = "icon",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  ButtonBase,
+  {
+    variant,
+    size,
+    onClick,
+    disabled,
+    testid,
+    className: cn(
+      "transition-all duration-200 ease-in-out group",
+      "hover:scale-105",
+      "active:scale-95",
+      "disabled:hover:scale-100",
+      !iconColor && (isLocked ? "text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300" : "text-emerald-500 dark:text-emerald-400 hover:text-emerald-600 dark:hover:text-emerald-300"),
+      className
+    ),
+    ...props,
+    children: isLocked ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.LockIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        className: "transition-all duration-200 group-hover:scale-110"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      import_react40.LockOpenIcon,
+      {
+        size: iconSize,
+        color: iconColor,
+        className: "transition-all duration-200 group-hover:scale-110"
+      }
+    )
+  }
+);
+var UnlockButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LockButton, { isLocked: false, testid: "button-unlock", ...props });
+
+// src/components/ui/DebounceInput.tsx
+var import_react41 = require("react");
+var import_react42 = require("@phosphor-icons/react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+
+// src/components/ui/FileUploader.tsx
+var React39 = __toESM(require("react"));
+var import_framer_motion16 = require("framer-motion");
+var import_react43 = require("@phosphor-icons/react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var getFileExtension = (filename) => {
+  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
+};
+var getFileTypeIcon = (file) => {
+  const extension = getFileExtension(file.name).toLowerCase();
+  const mimeType = file.type.toLowerCase();
+  if (extension === "pdf" || mimeType === "application/pdf") {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FilePdfIcon, { size: 20, className: "text-red-500" });
+  }
+  if (["doc", "docx"].includes(extension) || mimeType.includes("word")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileDocIcon, { size: 20, className: "text-blue-500" });
+  }
+  if (["xls", "xlsx"].includes(extension) || mimeType.includes("sheet")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileXlsIcon, { size: 20, className: "text-green-500" });
+  }
+  if (["ppt", "pptx"].includes(extension) || mimeType.includes("presentation")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FilePptIcon, { size: 20, className: "text-orange-500" });
+  }
+  if (extension === "csv" || mimeType === "text/csv") {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileCsvIcon, { size: 20, className: "text-green-600" });
+  }
+  if (["txt", "md", "json", "xml", "js", "ts", "html", "css"].includes(
+    extension
+  ) || mimeType.includes("text")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileTextIcon, { size: 20, className: "text-gray-500" });
+  }
+  if (mimeType.startsWith("image/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileImageIcon, { size: 20, className: "text-purple-500" });
+  }
+  if (mimeType.startsWith("video/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileVideoIcon, { size: 20, className: "text-pink-500" });
+  }
+  if (mimeType.startsWith("audio/")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileAudioIcon, { size: 20, className: "text-indigo-500" });
+  }
+  if (["zip", "rar", "7z", "tar", "gz"].includes(extension)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileZipIcon, { size: 20, className: "text-yellow-600" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.FileIcon, { size: 20, className: "text-muted-foreground" });
+};
+var createImagePreview = (file) => {
+  return new Promise((resolve) => {
+    if (!file.type.startsWith("image/")) {
+      resolve(null);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      resolve(e.target?.result);
+    };
+    reader.onerror = () => {
+      resolve(null);
+    };
+    reader.readAsDataURL(file);
+  });
+};
+var FileUploader = React39.forwardRef(
+  ({
+    className,
+    accept,
+    maxSize,
+    maxFiles = 1,
+    disabled = false,
+    value = [],
+    onValueChange,
+    onUpload,
+    showPreview = true,
+    dropzoneText = "Arraste arquivos aqui ou clique para selecionar",
+    dropzoneSubtext,
+    animate = true,
+    ...props
+  }, ref) => {
+    const [isDragging, setIsDragging] = React39.useState(false);
+    const [files, setFiles] = React39.useState(value);
+    const inputRef = React39.useRef(null);
+    const dragCounterRef = React39.useRef(0);
+    const multiple = maxFiles > 1;
+    React39.useEffect(() => {
+      setFiles(value);
+    }, [value]);
+    React39.useEffect(() => {
+      return () => {
+        files.forEach((file) => {
+          if (file.preview) {
+            URL.revokeObjectURL(file.preview);
+          }
+        });
+      };
+    }, [files]);
+    const validateFile = (file) => {
+      if (file.size > maxSize) {
+        return `Arquivo muito grande. M\xE1ximo: ${formatFileSize(maxSize)}`;
+      }
+      if (accept.length > 0) {
+        const fileExtension = `.${getFileExtension(file.name)}`;
+        const fileType = file.type;
+        const isAccepted = accept.some((acceptItem) => {
+          if (acceptItem.startsWith(".")) {
+            return fileExtension.toLowerCase() === acceptItem.toLowerCase();
+          }
+          if (acceptItem.endsWith("/*")) {
+            return fileType.startsWith(acceptItem.replace("/*", ""));
+          }
+          return fileType === acceptItem;
+        });
+        if (!isAccepted) {
+          return `Tipo de arquivo n\xE3o permitido. Aceitos: ${accept.join(", ")}`;
+        }
+      }
+      return null;
+    };
+    const createFileWithPreview = async (file) => {
+      const fileWithPreview = file;
+      fileWithPreview.id = `${file.name}-${Date.now()}-${Math.random()}`;
+      const error = validateFile(file);
+      if (error) {
+        fileWithPreview.error = error;
+      }
+      if (file.type.startsWith("image/")) {
+        try {
+          const preview = await createImagePreview(file);
+          if (preview) {
+            fileWithPreview.preview = preview;
+          }
+        } catch (error2) {
+          console.warn("Erro ao criar preview da imagem:", error2);
+        }
+      }
+      return fileWithPreview;
+    };
+    const handleFiles = async (newFiles) => {
+      if (disabled) return;
+      const availableSlots = maxFiles - files.length;
+      const filesToAdd = multiple ? newFiles.slice(0, availableSlots) : [newFiles[0]];
+      const filesWithPreview = await Promise.all(
+        filesToAdd.map((file) => createFileWithPreview(file))
+      );
+      const updatedFiles = multiple ? [...files, ...filesWithPreview] : filesWithPreview;
+      setFiles(updatedFiles);
+      onValueChange(updatedFiles);
+      if (onUpload) {
+        const validFiles = filesWithPreview.filter((f) => !f.error);
+        if (validFiles.length > 0) {
+          try {
+            await onUpload(validFiles);
+          } catch (error) {
+            console.error("Erro no upload:", error);
+          }
+        }
+      }
+    };
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current++;
+      if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
+        setIsDragging(true);
+      }
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current--;
+      if (dragCounterRef.current === 0) {
+        setIsDragging(false);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+      if (disabled) return;
+      const droppedFiles = Array.from(e.dataTransfer.files);
+      handleFiles(droppedFiles);
+    };
+    const handleInputChange = (e) => {
+      if (e.target.files) {
+        const selectedFiles = Array.from(e.target.files);
+        handleFiles(selectedFiles);
+      }
+    };
+    const handleRemoveFile = (fileId) => {
+      const fileToRemove = files.find((f) => f.id === fileId);
+      if (fileToRemove?.preview) {
+        URL.revokeObjectURL(fileToRemove.preview);
+      }
+      const updatedFiles = files.filter((f) => f.id !== fileId);
+      setFiles(updatedFiles);
+      onValueChange(updatedFiles);
+    };
+    const handleClick = () => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    };
+    const acceptString = accept.join(",");
+    const defaultSubtext = dropzoneSubtext || `Formatos: ${accept.join(", ")}. M\xE1ximo: ${formatFileSize(maxSize)}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref, className: cn("w-full", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+      import_framer_motion16.motion.div,
+      {
+        className: cn(
+          "relative flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-10 transition-all duration-300 dark:shadow-black/20",
+          isDragging && "border-primary bg-primary/10 scale-[1.02]",
+          !isDragging && "border-border hover:border-primary/60 hover:bg-muted/50",
+          disabled && "cursor-not-allowed opacity-50 hover:scale-100"
+        ),
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        onClick: handleClick,
+        whileHover: !disabled ? { scale: 1.01 } : void 0,
+        whileTap: !disabled ? { scale: 0.99 } : void 0,
+        animate: isDragging ? {
+          borderColor: `hsl(var(--primary))`,
+          backgroundColor: `hsl(var(--primary) / 0.1)`,
+          scale: 1.02
+        } : {
+          borderColor: `hsl(var(--border))`,
+          backgroundColor: `hsl(var(--background))`,
+          scale: 1
+        },
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          duration: 0.3
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "hidden",
+              accept: acceptString,
+              multiple,
+              disabled,
+              onChange: handleInputChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_framer_motion16.motion.div,
+            {
+              animate: isDragging ? { scale: 1.2, rotate: 10 } : { scale: 1, rotate: 0 },
+              transition: {
+                type: "spring",
+                stiffness: 300,
+                damping: 20,
+                duration: 0.3
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                import_framer_motion16.motion.div,
+                {
+                  className: cn(
+                    "mb-4 h-16 w-16 text-muted-foreground transition-colors duration-300 drop-shadow-lg flex items-center justify-center",
+                    isDragging && "text-primary"
+                  ),
+                  initial: false,
+                  animate: {
+                    color: isDragging ? `hsl(var(--primary))` : `hsl(var(--muted-foreground))`
+                  },
+                  transition: { duration: 0.3 },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.CloudArrowUpIcon, { size: 64 })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_framer_motion16.motion.p,
+            {
+              className: "mb-2 text-base font-semibold text-foreground",
+              initial: animate ? { opacity: 0, y: -10 } : false,
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.1 },
+              children: dropzoneText
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_framer_motion16.motion.p,
+            {
+              className: "text-sm text-muted-foreground",
+              initial: animate ? { opacity: 0, y: -10 } : false,
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.2 },
+              children: defaultSubtext
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_framer_motion16.AnimatePresence, { children: files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+            import_framer_motion16.motion.div,
+            {
+              initial: { opacity: 0, scale: 0.8, y: 10 },
+              animate: {
+                opacity: 1,
+                scale: 1,
+                y: 0,
+                backgroundColor: `hsl(var(--primary) / 0.1)`,
+                borderColor: `hsl(var(--primary) / 0.2)`
+              },
+              exit: { opacity: 0, scale: 0.8, y: 10 },
+              className: cn(
+                "mt-4 flex items-center gap-2 rounded-full border px-4 py-2 backdrop-blur-sm bg-primary/20 border-primary/30 shadow-lg"
+              ),
+              transition: { duration: 0.3 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "h-4 w-4 text-primary flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.CheckIcon, { size: 16, className: "text-emerald-500" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                  import_framer_motion16.motion.span,
+                  {
+                    className: "text-sm font-semibold text-primary",
+                    animate: { color: `hsl(var(--primary))` },
+                    transition: { duration: 0.3 },
+                    children: [
+                      files.length,
+                      " ",
+                      files.length === 1 ? "arquivo selecionado" : "arquivos selecionados"
+                    ]
+                  }
+                )
+              ]
+            }
+          ) }),
+          showPreview && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_framer_motion16.motion.div,
+            {
+              className: "mt-6 w-full",
+              initial: animate ? { opacity: 0, y: 10 } : false,
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: 0.3 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("h4", { className: "mb-3 text-sm font-medium text-muted-foreground", children: [
+                  "Arquivos selecionados (",
+                  files.length,
+                  "/",
+                  maxFiles,
+                  ")"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "space-y-2 overflow-y-auto max-h-44", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_framer_motion16.AnimatePresence, { mode: "popLayout", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+                  import_framer_motion16.motion.div,
+                  {
+                    layout: true,
+                    initial: animate ? { opacity: 0, x: -20 } : false,
+                    animate: { opacity: 1, x: 0 },
+                    exit: {
+                      opacity: 0,
+                      x: -20,
+                      transition: { duration: 0.2 }
+                    },
+                    transition: {
+                      delay: animate ? index * 0.05 : 0,
+                      layout: { duration: 0.2 }
+                    },
+                    className: cn(
+                      "flex items-center gap-3 rounded-md border p-3 transition-all duration-300",
+                      file.error ? "border-destructive/50 bg-destructive/5" : "border-border bg-background/80 hover:bg-muted/50 hover:shadow-md hover:shadow-primary/10 hover:border-primary/30"
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-muted overflow-hidden", children: file.preview ? (
+                        // Preview de imagem
+                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                          "img",
+                          {
+                            src: file.preview,
+                            alt: file.name,
+                            className: "h-full w-full object-cover rounded-md"
+                          }
+                        )
+                      ) : (
+                        // Ícone baseado no tipo de arquivo
+                        getFileTypeIcon(file)
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                          "p",
+                          {
+                            className: "truncate text-sm font-medium text-foreground",
+                            title: `${file.name} (${file.type || "Tipo desconhecido"})`,
+                            children: file.name
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: formatFileSize(file.size) }),
+                          file.type && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: "\u2022" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uppercase", children: getFileExtension(file.name) })
+                          ] })
+                        ] }),
+                        file.error && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                          import_framer_motion16.motion.p,
+                          {
+                            className: "mt-1 text-xs text-destructive",
+                            initial: { opacity: 0, y: -5 },
+                            animate: { opacity: 1, y: 0 },
+                            children: file.error
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                        DeleteButton,
+                        {
+                          type: "button",
+                          variant: "destructive",
+                          size: "icon",
+                          onClick: (e) => {
+                            e?.stopPropagation();
+                            handleRemoveFile(file.id);
+                          },
+                          className: "",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react43.XIcon, { size: 12 })
+                        }
+                      )
+                    ]
+                  },
+                  file.id
+                )) }) })
+              ] })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+FileUploader.displayName = "FileUploader";
+
+// src/components/ui/ModalBase.tsx
+var React40 = __toESM(require("react"));
+var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"));
+var import_react44 = require("@phosphor-icons/react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var ModalBase = DialogPrimitive2.Root;
+var ModalTriggerBase = DialogPrimitive2.Trigger;
+var ModalPortalBase = DialogPrimitive2.Portal;
+var ModalCloseBase = DialogPrimitive2.Close;
+var ModalOverlayBase = React40.forwardRef(({ className, testid: dataTestId = "modal-overlay", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalOverlayBase.displayName = DialogPrimitive2.Overlay.displayName;
+var ModalContentBase = React40.forwardRef(
+  ({
+    className,
+    children,
+    testid: dataTestId = "modal-content",
+    size = "md",
+    centered = true,
+    backdropBlur = true,
+    ...props
+  }, ref) => {
+    const sizeClass = size === "sm" ? "max-w-md" : size === "lg" ? "max-w-4xl" : size === "full" ? "w-full max-w-[calc(100%-2rem)]" : "max-w-2xl";
+    const positionClass = centered ? "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]" : "left-[50%] top-20 translate-x-[-50%] translate-y-0 sm:translate-y-0";
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(ModalPortalBase, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        ModalOverlayBase,
+        {
+          className: cn("bg-black/40", backdropBlur ? "backdrop-blur-sm" : "")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: `
+            @keyframes modal-fade-in { from { opacity: 0 } to { opacity: 1 } }
+            @keyframes modal-fade-out { from { opacity: 1 } to { opacity: 0 } }
+            @keyframes modal-scale-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98) } to { opacity:1; transform: translate(-50%, -50%) scale(1) } }
+            @keyframes modal-scale-out { from { opacity:1; transform: translate(-50%, -50%) scale(1) } to { opacity: 0; transform: translate(-50%, -48%) scale(.98) } }
+            @keyframes overlay-fade-in { from { opacity: 0 } to { opacity: 1 } }
+            @keyframes overlay-fade-out { from { opacity: 1 } to { opacity: 0 } }
+            .data-[state=open]\\:animate-modal-in { animation: modal-fade-in 220ms cubic-bezier(.16,.84,.24,1) both, modal-scale-in 220ms cubic-bezier(.16,.84,.24,1) both }
+            .data-[state=closed]\\:animate-modal-out { animation: modal-scale-out 160ms cubic-bezier(.16,.84,.24,1) both, modal-fade-out 160ms cubic-bezier(.16,.84,.24,1) both }
+            .data-[state=open]\\:animate-overlay-in { animation: overlay-fade-in 220ms cubic-bezier(.16,.84,.24,1) both }
+            .data-[state=closed]\\:animate-overlay-out { animation: overlay-fade-out 160ms cubic-bezier(.16,.84,.24,1) both }
+          `
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+        DialogPrimitive2.Content,
+        {
+          ref,
+          className: cn(
+            "fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg sm:rounded-lg max-h-[90dvh] overflow-auto",
+            "data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out",
+            positionClass,
+            sizeClass,
+            className
+          ),
+          "data-testid": dataTestId,
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(DialogPrimitive2.Close, { className: "absolute right-3 top-3 sm:right-4 sm:top-4 rounded-md bg-muted/10 p-1.5 opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none z-10 hover:bg-muted/20 transition-colors", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react44.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 text-foreground" }),
+              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "sr-only", children: "Close" })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+ModalContentBase.displayName = DialogPrimitive2.Content.displayName;
+var ModalHeaderBase = React40.forwardRef(({ className, testid: dataTestId = "modal-header", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalHeaderBase.displayName = "ModalHeader";
+var ModalFooterBase = React40.forwardRef(({ className, testid: dataTestId = "modal-footer", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalFooterBase.displayName = "ModalFooter";
+var ModalTitleBase = React40.forwardRef(({ className, testid: dataTestId = "modal-title", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalTitleBase.displayName = DialogPrimitive2.Title.displayName;
+var ModalDescriptionBase = React40.forwardRef(({ className, testid: dataTestId = "modal-description", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  DialogPrimitive2.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    "data-testid": dataTestId,
+    ...props
+  }
+));
+ModalDescriptionBase.displayName = DialogPrimitive2.Description.displayName;
+
 // src/hooks/use-drag.tsx
-var import_react40 = require("react");
+var import_react45 = require("react");
 var useDrag = (options = {}) => {
-  const [isDragging, setIsDragging] = (0, import_react40.useState)(null);
-  const [positions, setPositions] = (0, import_react40.useState)({});
-  const dragStartPos = (0, import_react40.useRef)(null);
-  const dragId = (0, import_react40.useRef)(null);
-  const handleMouseDown = (0, import_react40.useCallback)((id, e) => {
+  const [isDragging, setIsDragging] = (0, import_react45.useState)(null);
+  const [positions, setPositions] = (0, import_react45.useState)({});
+  const dragStartPos = (0, import_react45.useRef)(null);
+  const dragId = (0, import_react45.useRef)(null);
+  const handleMouseDown = (0, import_react45.useCallback)((id, e) => {
     e.preventDefault();
     const currentPosition = positions[id] || { top: 0, left: 0 };
     dragStartPos.current = {
@@ -9172,7 +10739,7 @@ var useDrag = (options = {}) => {
     setIsDragging(id);
     options.onDragStart?.(id);
   }, [positions, options]);
-  const handleMouseMove = (0, import_react40.useCallback)((e) => {
+  const handleMouseMove = (0, import_react45.useCallback)((e) => {
     if (!isDragging || !dragStartPos.current || !dragId.current) return;
     const deltaX = e.clientX - dragStartPos.current.x;
     const deltaY = e.clientY - dragStartPos.current.y;
@@ -9188,7 +10755,7 @@ var useDrag = (options = {}) => {
     }));
     options.onDrag?.(dragId.current, newPosition);
   }, [isDragging, options]);
-  const handleMouseUp = (0, import_react40.useCallback)(() => {
+  const handleMouseUp = (0, import_react45.useCallback)(() => {
     if (dragId.current) {
       options.onDragEnd?.(dragId.current);
     }
@@ -9196,7 +10763,7 @@ var useDrag = (options = {}) => {
     dragStartPos.current = null;
     dragId.current = null;
   }, [options]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -9208,16 +10775,16 @@ var useDrag = (options = {}) => {
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const setPosition = (0, import_react40.useCallback)((id, position) => {
+  const setPosition = (0, import_react45.useCallback)((id, position) => {
     setPositions((prev) => ({
       ...prev,
       [id]: position
     }));
   }, []);
-  const getPosition = (0, import_react40.useCallback)((id) => {
+  const getPosition = (0, import_react45.useCallback)((id) => {
     return positions[id] || { top: 0, left: 0 };
   }, [positions]);
-  const isElementDragging = (0, import_react40.useCallback)((id) => {
+  const isElementDragging = (0, import_react45.useCallback)((id) => {
     return isDragging === id;
   }, [isDragging]);
   return {