lecom-ui 2.4.9 → 2.5.1

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../Table/Table.js';
+
+function DataTable({
+  columns,
+  data,
+  noResults
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: "rounded-md border" }, /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => /* @__PURE__ */ React.createElement(TableHead, { key: header.id }, header.isPlaceholder ? null : flexRender(
+    header.column.columnDef.header,
+    header.getContext()
+  )))))), /* @__PURE__ */ React.createElement(TableBody, null, table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React.createElement(
+    TableRow,
+    {
+      key: row.id,
+      "data-state": row.getIsSelected() && "selected"
+    },
+    row.getVisibleCells().map((cell) => /* @__PURE__ */ React.createElement(TableCell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))
+  )) : /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(TableCell, { colSpan: columns.length }, noResults ?? /* @__PURE__ */ React.createElement("div", { className: "text-center" }, "No results."))))));
+}
+
+export { DataTable };

package/dist/components/Notification/Notification.js

@@ -0,0 +1,77 @@
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils.js';
+import { cva } from 'class-variance-authority';
+import { NotificationCallout } from './NotificationCallout.js';
+import { NotificationInline } from './NotificationInline.js';
+import { MemoizedNotificationToast } from './NotificationToast.js';
+
+var TypeMessageNotification = /* @__PURE__ */ ((TypeMessageNotification2) => {
+  TypeMessageNotification2["SUCCESS"] = "success";
+  TypeMessageNotification2["ERROR"] = "error";
+  TypeMessageNotification2["INFORMATION"] = "information";
+  TypeMessageNotification2["WARNING"] = "warning";
+  return TypeMessageNotification2;
+})(TypeMessageNotification || {});
+const notificationVariants = cva(
+  "px-4 py-2 rounded-lg gap-4 relative grid w-full m-0",
+  {
+    variants: {
+      variant: {
+        success: "bg-green-100",
+        error: "bg-red-100",
+        information: "bg-blue-100",
+        warning: "bg-yellow-100"
+      }
+    },
+    defaultVariants: {
+      variant: "information"
+    }
+  }
+);
+const posistionMap = {
+  topRight: "top-0 right-0",
+  topLeft: "top-0 left-0",
+  bottomRight: "bottom-0 right-0",
+  bottomLeft: "bottom-0 left-0"
+};
+const renderNotification = (props) => {
+  switch (props.type) {
+    case "toast":
+      return /* @__PURE__ */ React.createElement(MemoizedNotificationToast, { ...props });
+    case "inline":
+      return /* @__PURE__ */ React.createElement(NotificationInline, { ...props });
+    case "callout":
+      return /* @__PURE__ */ React.createElement(NotificationCallout, { ...props });
+    default:
+      return null;
+  }
+};
+const getPositionClass = (type, placement = "topRight") => {
+  if (type === "toast" && placement) {
+    return posistionMap[placement];
+  }
+  return "";
+};
+const Notification = forwardRef(
+  ({ ...props }, ref) => {
+    const { type, placement } = props;
+    const { shouldExpand } = props;
+    const widthStyle = shouldExpand ? "w-full" : "inline-block";
+    const positionClass = getPositionClass(type, placement);
+    return /* @__PURE__ */ React.createElement(
+      "main",
+      {
+        className: cn(
+          widthStyle,
+          type === "toast" && "fixed z-50 p-4 space-y-2",
+          positionClass
+        ),
+        ref
+      },
+      renderNotification(props)
+    );
+  }
+);
+Notification.displayName = "Notification";
+
+export { Notification, TypeMessageNotification, getPositionClass, notificationVariants };

package/dist/components/Notification/NotificationBase.js

@@ -0,0 +1,23 @@
+import { cn } from '../../lib/utils.js';
+import { notificationVariants } from './Notification.js';
+
+const NotificationBase = ({
+  variant,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+  className,
+  dataTestId
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: cn(notificationVariants({ variant }), className),
+    onMouseEnter,
+    onMouseLeave,
+    "data-testid": dataTestId,
+    "aria-hidden": "true"
+  },
+  children
+);
+
+export { NotificationBase };

package/dist/components/Notification/NotificationCallout.js

@@ -0,0 +1,84 @@
+import { useState, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils.js';
+import { ChevronUpIcon } from 'lucide-react';
+import { NotificationBase } from './NotificationBase.js';
+import { NotificationContent } from './NotificationContent.js';
+import { NotificationIcon } from './NotificationIcon.js';
+
+const NotificationCallout = ({ ...props }) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [shouldCollapse, setShouldCollapse] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [lineHeight, setLineHeight] = useState(0);
+  const refCollapse = useRef(null);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (contentRef.current) {
+      const computedStyle = window.getComputedStyle(contentRef.current);
+      const lineHeight2 = parseFloat(computedStyle.lineHeight);
+      setLineHeight(lineHeight2);
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [props.content]);
+  useEffect(() => {
+    const shouldCollapse2 = contentHeight > lineHeight * (props.action ? 3 : 2);
+    setShouldCollapse(shouldCollapse2);
+  }, [contentHeight, lineHeight]);
+  useEffect(() => {
+    if (isCollapsed) {
+      refCollapse.current?.style.setProperty("transform", "rotate(180deg)");
+    } else {
+      refCollapse.current?.style.setProperty("transform", "rotate(0deg)");
+    }
+  }, [isCollapsed]);
+  const handleCollapse = () => setIsCollapsed(!isCollapsed);
+  const defaultVariant = props.variant ?? "information";
+  const getGridColumns = () => {
+    if (props.shouldExpand) {
+      return shouldCollapse ? "grid-cols-[1.25rem_1fr_minmax(1.25rem,_auto)]" : "grid-cols-[1.25rem_1fr]";
+    } else {
+      return shouldCollapse ? "grid-cols-[1.25rem_auto_minmax(1.25rem,_auto)]" : "grid-cols-[1.25rem_auto]";
+    }
+  };
+  const getCollapseClass = () => {
+    if (isCollapsed && !props.title)
+      return "max-h-6 overflow-hidden line-clamp-1";
+    if (isCollapsed && props.title) return "max-h-0 overflow-hidden";
+    return "no-collapse";
+  };
+  return /* @__PURE__ */ React.createElement(
+    NotificationBase,
+    {
+      variant: defaultVariant,
+      className: cn(getGridColumns(), isCollapsed && "place-items-center"),
+      dataTestId: "notification-callout"
+    },
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
+      NotificationContent,
+      {
+        title: props.title,
+        content: props.content,
+        ref: contentRef,
+        className: cn(
+          "transition-all duration-300",
+          isCollapsed && getCollapseClass()
+        )
+      }
+    ), props.action),
+    /* @__PURE__ */ React.createElement(
+      ChevronUpIcon,
+      {
+        "data-testid": "collapse-icon",
+        onClick: handleCollapse,
+        ref: refCollapse,
+        className: cn(
+          shouldCollapse ? "opacity-100 size-5 text-grey-800 transition-transform duration-200 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
+        )
+      }
+    )
+  );
+};
+NotificationCallout.displayName = "NotificationCallout";
+
+export { NotificationCallout };

package/dist/components/Notification/NotificationCloseButton.js

@@ -0,0 +1,18 @@
+import { cn } from '../../lib/utils.js';
+import { XIcon } from 'lucide-react';
+
+const NotificationCloseButton = ({
+  onClose,
+  enableClose
+}) => /* @__PURE__ */ React.createElement(
+  XIcon,
+  {
+    className: cn(
+      enableClose ? "opacity-100 size-5 text-grey-800 cursor-pointer hover:text-foreground group-hover:opacity-100" : "opacity-0 pointer-events-none h-0 w-0 absolute"
+    ),
+    onClick: onClose,
+    "data-testid": "close-icon"
+  }
+);
+
+export { NotificationCloseButton };

package/dist/components/Notification/NotificationContent.js

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { Typography } from '../Typography/Typography.js';
+
+const NotificationContent = forwardRef(({ title, content, className, children }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-0.5 flex-1" }, title && /* @__PURE__ */ React.createElement(
+  Typography,
+  {
+    variant: "body-medium-500",
+    color: "grey-800",
+    "data-testid": "title"
+  },
+  title
+), /* @__PURE__ */ React.createElement("div", { ref, className, "data-testid": "collapse-content" }, /* @__PURE__ */ React.createElement(
+  Typography,
+  {
+    variant: "body-medium-400",
+    color: "grey-800",
+    "data-testid": "content"
+  },
+  content,
+  children
+))));
+NotificationContent.displayName = "NotificationContent";
+
+export { NotificationContent };

package/dist/components/Notification/NotificationIcon.js

@@ -0,0 +1,13 @@
+import { CircleCheckIcon, CircleAlertIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
+
+const iconMap = {
+  success: /* @__PURE__ */ React.createElement(CircleCheckIcon, { className: "text-green-600 size-5" }),
+  error: /* @__PURE__ */ React.createElement(CircleAlertIcon, { className: "text-red-600 size-5" }),
+  information: /* @__PURE__ */ React.createElement(InfoIcon, { className: "text-blue-600 size-5" }),
+  warning: /* @__PURE__ */ React.createElement(TriangleAlertIcon, { className: "size-5 text-yellow-600" })
+};
+const NotificationIcon = ({
+  variant
+}) => iconMap[variant];
+
+export { NotificationIcon };

package/dist/components/Notification/NotificationInline.js

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { NotificationBase } from './NotificationBase.js';
+import { NotificationCloseButton } from './NotificationCloseButton.js';
+import { NotificationContent } from './NotificationContent.js';
+import { NotificationIcon } from './NotificationIcon.js';
+
+const NotificationInline = ({
+  variant,
+  enableClose,
+  content,
+  title,
+  action,
+  shouldExpand
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  if (!isVisible) return null;
+  const defaultVariant = variant ?? "information";
+  const getFullWidthColumns = () => {
+    if (action && enableClose) {
+      return "grid grid-cols-[1.25rem_1fr_auto_minmax(1.25rem,_auto)]";
+    } else if (action) {
+      return "grid grid-cols-[1.25rem_1fr_auto]";
+    } else if (enableClose) {
+      return "grid grid-cols-[1.25rem_1fr_minmax(1.25rem,_auto)]";
+    } else {
+      return "grid grid-cols-[1.25rem_1fr]";
+    }
+  };
+  const getNonFullWidthColumns = () => {
+    if (action && enableClose) {
+      return "grid-cols-[1.25rem_auto_auto_1.25rem]";
+    } else if (action) {
+      return "grid-cols-[1.25rem_auto_auto]";
+    } else if (enableClose) {
+      return "grid-cols-[1.25rem_auto_1.25rem]";
+    } else {
+      return "grid-cols-[1.25rem_auto]";
+    }
+  };
+  const getGridColumns = () => {
+    if (shouldExpand) {
+      return getFullWidthColumns();
+    } else {
+      return getNonFullWidthColumns();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    NotificationBase,
+    {
+      variant: defaultVariant,
+      className: cn(getGridColumns()),
+      dataTestId: "notification-inline"
+    },
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: defaultVariant }),
+    /* @__PURE__ */ React.createElement(
+      NotificationContent,
+      {
+        title,
+        content,
+        className: "max-h-10 overflow-hidden"
+      }
+    ),
+    action,
+    /* @__PURE__ */ React.createElement(
+      NotificationCloseButton,
+      {
+        enableClose: enableClose ?? false,
+        onClose: () => setIsVisible(false)
+      }
+    )
+  );
+};
+NotificationInline.displayName = "NotificationInline";
+
+export { NotificationInline };

package/dist/components/Notification/NotificationToast.js

@@ -0,0 +1,128 @@
+import { memo, useState, useRef, useEffect, useMemo } from 'react';
+import { cn } from '../../lib/utils.js';
+import { NotificationBase } from './NotificationBase.js';
+import { NotificationCloseButton } from './NotificationCloseButton.js';
+import { NotificationContent } from './NotificationContent.js';
+import { NotificationIcon } from './NotificationIcon.js';
+import { useNotificationToast, TOAST_REMOVE_DELAY } from './useNotificationToast.js';
+
+const NotificationToast = (props) => {
+  const { toasts, closeNotification, pauseNotification, resumeNotification } = useNotificationToast();
+  const [progressMap, setProgressMap] = useState({});
+  const progressMapRef = useRef({});
+  const isPausedMapRef = useRef({});
+  const remainingTimeMapRef = useRef({});
+  const lastUpdateMapRef = useRef({});
+  useEffect(() => {
+    const now = Date.now();
+    const newProgress = { ...progressMapRef.current };
+    const newRemainingTime = { ...remainingTimeMapRef.current };
+    const newLastUpdate = { ...lastUpdateMapRef.current };
+    toasts.forEach((toast) => {
+      if (!progressMapRef.current[toast.id]) {
+        newProgress[toast.id] = 100;
+        newRemainingTime[toast.id] = TOAST_REMOVE_DELAY;
+        newLastUpdate[toast.id] = now;
+      }
+    });
+    progressMapRef.current = newProgress;
+    remainingTimeMapRef.current = newRemainingTime;
+    lastUpdateMapRef.current = newLastUpdate;
+    setProgressMap(newProgress);
+  }, [toasts]);
+  useEffect(() => {
+    if (toasts.length === 0) return;
+    const interval = setInterval(() => {
+      const now = Date.now();
+      const newProgress = { ...progressMapRef.current };
+      Object.keys(newProgress).forEach((id) => {
+        if (!isPausedMapRef.current[id]) {
+          const elapsedTime = now - lastUpdateMapRef.current[id];
+          const remainingTime = remainingTimeMapRef.current[id] - elapsedTime;
+          newProgress[id] = remainingTime / TOAST_REMOVE_DELAY * 100;
+          remainingTimeMapRef.current[id] = remainingTime;
+          lastUpdateMapRef.current[id] = now;
+          if (remainingTime <= 0) {
+            closeNotification(id);
+          }
+        }
+      });
+      progressMapRef.current = newProgress;
+      setProgressMap(newProgress);
+    }, 100);
+    return () => clearInterval(interval);
+  }, [toasts, closeNotification]);
+  const handleMouseEnter = (id) => {
+    if (props.pauseOnHover) {
+      pauseNotification(id);
+      isPausedMapRef.current[id] = true;
+    }
+  };
+  const handleMouseLeave = (id) => {
+    if (props.pauseOnHover) {
+      resumeNotification(id);
+      isPausedMapRef.current[id] = false;
+      lastUpdateMapRef.current[id] = Date.now();
+    }
+  };
+  const getGridColumns = () => {
+    if (props.enableClose) {
+      return "grid-cols-[1.25rem_minmax(_auto,11rem)_minmax(1.25rem,_auto)]";
+    } else {
+      return "grid-cols-[1.25rem_minmax(_auto,13.25rem)]";
+    }
+  };
+  const colorMap = useMemo(
+    () => ({
+      information: "bg-blue-600",
+      success: "bg-green-600",
+      error: "bg-red-600",
+      warning: "bg-yellow-600"
+    }),
+    []
+  );
+  const renderAction = () => {
+    if (props.action) {
+      return /* @__PURE__ */ React.createElement("div", { className: cn(props.showProgress ? "py-2" : "pt-2") }, props.action);
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, toasts.map((toast) => /* @__PURE__ */ React.createElement(
+    NotificationBase,
+    {
+      key: toast.id,
+      variant: toast.variant,
+      className: cn(
+        "sm:w-[17.5rem] min-w-auto cursor-pointer",
+        getGridColumns()
+      ),
+      onMouseEnter: () => handleMouseEnter(toast.id),
+      onMouseLeave: () => handleMouseLeave(toast.id),
+      dataTestId: "notification-toast"
+    },
+    /* @__PURE__ */ React.createElement(NotificationIcon, { variant: toast.variant }),
+    /* @__PURE__ */ React.createElement(NotificationContent, { title: toast.title, content: toast.content }, renderAction()),
+    /* @__PURE__ */ React.createElement(
+      NotificationCloseButton,
+      {
+        enableClose: props.enableClose ?? false,
+        onClose: () => closeNotification(toast.id)
+      }
+    ),
+    props.showProgress && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        "data-testid": "progress-bar",
+        className: cn(
+          `absolute bottom-0 left-0 h-1 rounded-b-lg transition-all`,
+          colorMap[toast.variant]
+        ),
+        style: { width: `${progressMap[toast.id] ?? 100}%` }
+      }
+    )
+  )));
+};
+NotificationToast.displayName = "NotificationToast";
+const MemoizedNotificationToast = memo(NotificationToast);
+
+export { MemoizedNotificationToast };

package/dist/components/Notification/useNotificationToast.js

@@ -0,0 +1,170 @@
+import React__default from 'react';
+
+const TOAST_LIMIT = Infinity;
+const TOAST_REMOVE_DELAY = 5e3;
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+  PAUSE_TOAST: "PAUSE_TOAST",
+  RESUME_TOAST: "RESUME_TOAST"
+};
+let count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+const toastTimeouts = /* @__PURE__ */ new Map();
+const toastStartTimes = /* @__PURE__ */ new Map();
+const remainingTimes = /* @__PURE__ */ new Map();
+const addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) return;
+  const startTime = Date.now();
+  toastStartTimes.set(toastId, startTime);
+  const timeout = setTimeout(() => {
+    dispatch({ type: actionTypes.REMOVE_TOAST, toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+const pauseToastTimeout = (toastId) => {
+  if (!toastId || !toastTimeouts.has(toastId)) return;
+  const startTime = toastStartTimes.get(toastId) ?? Date.now();
+  const elapsedTime = Date.now() - startTime;
+  const remainingTime = Math.max(TOAST_REMOVE_DELAY - elapsedTime, 0);
+  remainingTimes.set(toastId, remainingTime);
+  clearTimeout(toastTimeouts.get(toastId));
+  toastTimeouts.delete(toastId);
+};
+const resumeToastTimeout = (toastId) => {
+  if (!toastId || toastTimeouts.has(toastId)) return;
+  const remainingTime = remainingTimes.get(toastId) ?? TOAST_REMOVE_DELAY;
+  const timeout = setTimeout(() => {
+    dispatch({ type: actionTypes.REMOVE_TOAST, toastId });
+  }, remainingTime);
+  toastTimeouts.set(toastId, timeout);
+  toastStartTimes.set(toastId, Date.now());
+  remainingTimes.delete(toastId);
+};
+const handleAddToast = (state, toast2) => {
+  addToRemoveQueue(toast2.id);
+  const newToast = {
+    ...toast2,
+    timeout: null
+  };
+  const toastLimit = toast2.toastLimit ?? TOAST_LIMIT;
+  return {
+    ...state,
+    toasts: [...state.toasts, newToast].slice(0, toastLimit)
+  };
+};
+const handleUpdateToast = (state, toast2) => ({
+  ...state,
+  toasts: state.toasts.map((t) => t.id === toast2.id ? { ...t, ...toast2 } : t)
+});
+const handleDismissToast = (state, toastId) => {
+  if (toastId) {
+    pauseToastTimeout(toastId);
+  } else {
+    state.toasts.forEach((t) => pauseToastTimeout(t.id));
+  }
+  return {
+    ...state,
+    toasts: state.toasts.filter((t) => t.id !== toastId)
+  };
+};
+const handleRemoveToast = (state, toastId) => {
+  if (!toastId) return state;
+  toastTimeouts.delete(toastId);
+  toastStartTimes.delete(toastId);
+  remainingTimes.delete(toastId);
+  return {
+    ...state,
+    toasts: state.toasts.filter((t) => t.id !== toastId)
+  };
+};
+const handleAddToastAction = (state, action) => {
+  if (action.type === "ADD_TOAST") {
+    return handleAddToast(state, action.toast);
+  }
+  return state;
+};
+const handleUpdateToastAction = (state, action) => {
+  if (action.type === "UPDATE_TOAST") {
+    return handleUpdateToast(state, action.toast);
+  }
+  return state;
+};
+const handleDismissToastAction = (state, action) => {
+  if (action.type === "DISMISS_TOAST") {
+    return handleDismissToast(state, action.toastId);
+  }
+  return state;
+};
+const handleRemoveToastAction = (state, action) => {
+  if (action.type === "REMOVE_TOAST") {
+    return handleRemoveToast(state, action.toastId);
+  }
+  return state;
+};
+const handlePauseToastAction = (state, action) => {
+  if (action.type === "PAUSE_TOAST") {
+    pauseToastTimeout(action.toastId);
+  }
+  return state;
+};
+const handleResumeToastAction = (state, action) => {
+  if (action.type === "RESUME_TOAST") {
+    resumeToastTimeout(action.toastId);
+  }
+  return state;
+};
+const reducer = (state, action) => {
+  state = handleAddToastAction(state, action);
+  state = handleUpdateToastAction(state, action);
+  state = handleDismissToastAction(state, action);
+  state = handleRemoveToastAction(state, action);
+  state = handlePauseToastAction(state, action);
+  state = handleResumeToastAction(state, action);
+  return state;
+};
+const listeners = {};
+let memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  for (const listener of Object.values(listeners)) {
+    listener(memoryState);
+  }
+}
+function toast({ ...props }) {
+  const id = genId();
+  const newToast = {
+    ...props,
+    id,
+    open: true,
+    timeout: null,
+    onOpenChange: (open) => {
+      if (!open) dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
+    }
+  };
+  dispatch({ type: actionTypes.ADD_TOAST, toast: newToast });
+}
+function useNotificationToast() {
+  const [state, setState] = React__default.useState(memoryState);
+  React__default.useEffect(() => {
+    const id = genId();
+    listeners[id] = setState;
+    return () => {
+      delete listeners[id];
+    };
+  }, []);
+  return {
+    toasts: state.toasts,
+    toast,
+    closeNotification: (toastId) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+    resumeNotification: (toastId) => dispatch({ type: actionTypes.RESUME_TOAST, toastId }),
+    pauseNotification: (toastId) => dispatch({ type: actionTypes.PAUSE_TOAST, toastId })
+  };
+}
+
+export { TOAST_REMOVE_DELAY, reducer, toast, useNotificationToast };

package/dist/components/Skeleton/Skeleton.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { cn } from '../../lib/utils.js';
 
 const Skeleton = ({