lecom-ui 5.2.1 → 5.2.3

package/README.md

@@ -1 +1 @@
-lecom-ui
+lecom-ui

package/dist/badge.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/utils.js';
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/dist/button-dropdown.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, forwardRef, useRef } from 'react';
+import { isLightOrDark, PercentOfOpacityAlphaCode, isUrl, isImage, cn } from './lib/utils.js';
+import { Button } from './button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from './dropdown-menu.js';
+import { IconHandler } from './icon-handler.js';
+
+const ButtonDropdownContext = createContext({
+  backgroundColor: "",
+  textColor: "",
+  openDropdown: false,
+  setOpenDropdown: function() {
+    throw new Error("Function not implemented.");
+  },
+  currentPath: ""
+});
+function ButtonDropdownProvider({
+  backgroundColor,
+  textColor,
+  openDropdown,
+  setOpenDropdown,
+  currentPath,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    ButtonDropdownContext.Provider,
+    {
+      value: {
+        backgroundColor,
+        textColor,
+        openDropdown,
+        setOpenDropdown,
+        currentPath
+      },
+      children
+    }
+  );
+}
+const ButtonDropdown = forwardRef(
+  ({
+    icon,
+    backgroundColor,
+    textColor,
+    openDropdown,
+    setOpenDropdown,
+    currentPath = "",
+    side = "bottom",
+    align = "end",
+    colorType = "color",
+    className,
+    classNameContent,
+    children,
+    ...rest
+  }, ref) => {
+    const refDropdown = useRef(null);
+    const colorsBackgroundColor = isLightOrDark(backgroundColor);
+    const variantsColors = refDropdown.current && openDropdown ? backgroundColor : PercentOfOpacityAlphaCode(textColor, 0.87);
+    return /* @__PURE__ */ jsx(
+      ButtonDropdownProvider,
+      {
+        backgroundColor,
+        currentPath,
+        openDropdown,
+        setOpenDropdown,
+        textColor,
+        children: /* @__PURE__ */ jsx("div", { className: "relative p-0 m-0 overflow-auto", children: /* @__PURE__ */ jsxs(DropdownMenu, { onOpenChange: setOpenDropdown, modal: false, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...rest,
+              size: typeof icon === "string" && !isUrl(icon) && !isImage(icon) ? "default" : "icon",
+              variant: "rounded",
+              style: {
+                backgroundColor: refDropdown.current && openDropdown ? textColor : void 0,
+                color: refDropdown.current && openDropdown ? backgroundColor : PercentOfOpacityAlphaCode(textColor, 0.87)
+              },
+              className: cn(
+                "focus-visible:ring-transparent",
+                {
+                  "bg-transparency-light hover:bg-transparency-light": colorsBackgroundColor.isLight || colorsBackgroundColor.isLight && !openDropdown,
+                  "bg-transparency-dark hover:bg-transparency-dark": colorsBackgroundColor.isDark || colorsBackgroundColor.isDark && !openDropdown
+                },
+                className
+              ),
+              ref: refDropdown,
+              children: /* @__PURE__ */ jsx(
+                IconHandler,
+                {
+                  icon,
+                  variantsColors,
+                  colorType
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownMenuContent,
+            {
+              ...rest,
+              ref,
+              side,
+              align,
+              className: cn(
+                `w-max px-0 pb-0 rounded-sm border-gray-scale79 z-[9999] bg-white overflow-auto scrollbar-thin max-h-screen`,
+                classNameContent
+              ),
+              children
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+ButtonDropdown.displayName = "ButtonDropdown";
+
+export { ButtonDropdown };

package/dist/button.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Loader2Icon } from 'lucide-react';
+import { cn, PercentOfOpacityAlphaCode } from './lib/utils.js';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        primary: "bg-blue-dark text-white shadow-sm hover:bg-[#4096ff]",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        rounded: "bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full",
+        transparencyLight: "text-primary-foreground shadow rounded-full bg-transparency-light hover:bg-transparency-light focus-visible:ring-transparent",
+        transparencyDark: "text-primary-foreground shadow rounded-full bg-transparency-dark hover:bg-transparency-dark focus-visible:ring-transparent"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        padding: "px-4 py-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    headerBackgroundColor = "",
+    headerTextColor = "",
+    isToggle = false,
+    pulse = false,
+    loading = false,
+    hiddenChildren = false,
+    disabled,
+    onClick,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const handleClick = (event) => {
+      if (pulse) {
+        const button = event.currentTarget;
+        button.classList.add("pulse");
+        button.addEventListener(
+          "animationend",
+          () => {
+            button.classList.remove("pulse");
+          },
+          { once: true }
+        );
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        className: cn(
+          buttonVariants({ variant, size, className }),
+          loading && "hover:brightness-125"
+        ),
+        onClick: handleClick,
+        ref,
+        disabled: loading || disabled,
+        style: {
+          ...headerTextColor && headerTextColor !== "" && isToggle && (variant === "transparencyDark" || variant === "transparencyLight") && {
+            backgroundColor: headerTextColor
+          },
+          ...headerBackgroundColor && headerBackgroundColor !== "" && isToggle && (variant === "transparencyDark" || variant === "transparencyLight") && {
+            color: headerBackgroundColor
+          },
+          ...headerTextColor && headerTextColor !== "" && !isToggle && (variant === "transparencyDark" || variant === "transparencyLight") && {
+            color: PercentOfOpacityAlphaCode(headerTextColor, 0.87)
+          }
+        },
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ jsx(Loader2Icon, { className: cn("h-4 w-4 animate-spin", children && "mr-2") }),
+          hiddenChildren && loading ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/calendar.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { DayPicker } from 'react-day-picker';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
+import { cn } from './lib/utils.js';
+import { buttonVariants } from './button.js';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: () => /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-4 w-4" }),
+        IconRight: () => /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/dist/card.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from './lib/utils.js';
+
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/checkbox.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { cn } from './lib/utils.js';
+
+const Checkbox = React.forwardRef(({ className, disabled, checked, ...props }, ref) => {
+  const id = React.useId();
+  const buildClassNameRoot = () => {
+    if (disabled && checked) {
+      return "border-gray-400 bg-gray-200 cursor-not-allowed opacity-50";
+    }
+    if (disabled) {
+      return "bg-gray-200 cursor-not-allowed opacity-50";
+    }
+    if (checked) {
+      return "bg-primary border-primary text-primary-foreground";
+    }
+    return "hover:border-primary";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        className: cn(
+          `peer h-4 w-4 shrink-0 rounded-sm border border-gray-400 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ${buildClassNameRoot()}`,
+          className
+        ),
+        disabled,
+        checked,
+        ...props,
+        id,
+        children: /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Indicator,
+          {
+            className: cn("flex items-center justify-center text-current"),
+            children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: `text-[15px] leading-none cursor-pointer pl-2 ${disabled ? "cursor-not-allowed" : ""}`,
+        htmlFor: id,
+        children: props.children
+      }
+    )
+  ] });
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/dist/collapse.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { cn } from './lib/utils.js';
+
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, warning, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn(!warning && "border-b", className),
+    "data-warning": warning,
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, warning, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between text-sm font-medium transition-all [&[data-state=open]>svg#ChevronDownIcon]:rotate-180",
+      warning ? "[&[data-state=closed]]:py-4 py-1" : "hover:underline py-4 ",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronDownIcon, { id: "ChevronDownIcon", className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+const Collapse = ({ items, defaultActiveKey, className }) => {
+  return /* @__PURE__ */ jsx(
+    Accordion,
+    {
+      type: "multiple",
+      className,
+      defaultValue: defaultActiveKey,
+      children: items.map((i) => /* @__PURE__ */ jsxs(AccordionItem, { value: i.key, warning: i.warning ?? false, children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { warning: i.warning ?? false, children: i.label }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: i.children })
+      ] }, i.key))
+    }
+  );
+};
+
+export { Collapse };

package/dist/collapsible.js

@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/command.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as Command$1 } from 'cmdk';
+import { cn } from './lib/utils.js';
+import { Dialog, DialogContent } from './dialog.js';
+
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+CommandDialog.displayName = "CommandDialog";
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-border", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+const CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/components/Notification/NotificationCallout.js

@@ -74,7 +74,7 @@ const NotificationCallout = ({ ...props }) => {
         content: props.content,
         ref: contentRef,
         className: cn(
-          "transition-all duration-300 leading-4",
+          "transition-all duration-300",
           isCollapsed && getCollapseClass()
         )
       }

package/dist/components/Notification/NotificationInline.js

@@ -58,7 +58,7 @@ const NotificationInline = ({
       {
         title,
         content,
-        className: "max-h-11 overflow-hidden leading-4"
+        className: "max-h-11 overflow-hidden"
       }
     ),
     action,