'use client';

// src/base/Box/Box.tsx
import { StyledComponent, WithStyledComponent } from "@paalan/react-shared/system";
import { forwardRef } from "@paalan/react-shared/utils";
import { jsx } from "react/jsx-runtime";
var Box = forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(StyledComponent, { ...props, ref });
});
Box.withComponent = WithStyledComponent;

// src/base/Center/Center.tsx
import { cn } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef2 } from "@paalan/react-shared/utils";
import { jsx as jsx2 } from "react/jsx-runtime";
var Center = forwardRef2((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx2(Box, { className: cn("flex items-center justify-center", className), ...restProps, ref, children });
});

// src/base/Container/Container.tsx
import { cn as cn2 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef3 } from "@paalan/react-shared/utils";
import { jsx as jsx3 } from "react/jsx-runtime";
var Container = forwardRef3((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx3(Box, { className: cn2("container", className), ...restProps, ref, children });
});

// src/base/Flex/Flex.tsx
import { cn as cn3 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef4 } from "@paalan/react-shared/utils";
import { jsx as jsx4 } from "react/jsx-runtime";
var Flex = forwardRef4((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx4(Box, { className: cn3("flex", className), ...restProps, ref, children });
});

// src/base/Grid/Grid.tsx
import { cn as cn4 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef5 } from "@paalan/react-shared/utils";
import { jsx as jsx5 } from "react/jsx-runtime";
var Grid = forwardRef5((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx5(Box, { className: cn4("grid", className), ...restProps, ref, children });
});
var GridItem = forwardRef5((props, ref) => {
  const { children, ...restProps } = props;
  return /* @__PURE__ */ jsx5(Box, { ...restProps, ref, children });
});

// src/base/HStack/HStack.tsx
import { cn as cn5 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef6 } from "@paalan/react-shared/utils";
import { jsx as jsx6 } from "react/jsx-runtime";
var HStack = forwardRef6((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx6(Box, { className: cn5("flex flex-row items-center gap-2", className), ...restProps, ref, children });
});

// src/base/Heading/Heading.tsx
import { cn as cn6 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef7 } from "@paalan/react-shared/utils";
import { jsx as jsx7 } from "react/jsx-runtime";
var headingSizes = {
  h1: "text-3xl font-bold",
  h2: "text-2xl font-bold",
  h3: "text-xl font-semibold",
  h4: "text-lg font-semibold",
  h5: "text-base font-semibold",
  h6: "text-sm font-semibold"
};
var Heading = forwardRef7((props, ref) => {
  const { children, as: headTag = "h1", className, ...restProps } = props;
  const size = headingSizes[headTag];
  return /* @__PURE__ */ jsx7(Box, { as: headTag, ...restProps, ref, className: cn6(size, className), children });
});

// src/base/Paper/Paper.tsx
import { cn as cn7 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef8 } from "@paalan/react-shared/utils";
import { cva } from "class-variance-authority";
import { jsx as jsx8 } from "react/jsx-runtime";
var paperVariants = cva("bg-background text-foreground", {
  variants: {
    shadow: {
      default: "shadow",
      sm: "shadow-sm",
      md: "shadow-md",
      lg: "shadow-lg",
      xl: "shadow-xl",
      "2xl": "shadow-2xl",
      inner: "shadow-inner",
      none: "shadow-none"
    }
  },
  defaultVariants: {
    shadow: "default"
  }
});
var Paper = forwardRef8(
  ({ withBorder, shadow, className, ...props }, ref) => {
    return /* @__PURE__ */ jsx8(
      Box,
      {
        ref,
        className: cn7(paperVariants({ shadow }), withBorder ? "border border-border" : "", className),
        ...props
      }
    );
  }
);

// src/base/Portal/Portal.tsx
import { forwardRef as forwardRef9, useRef, useState } from "react";
import { useIsomorphicEffect } from "@paalan/react-hooks";
import { assignRef } from "@paalan/react-shared/utils";
import { createPortal } from "react-dom";
import { Fragment, jsx as jsx9 } from "react/jsx-runtime";
var createPortalNode = (props) => {
  const node = document.createElement("div");
  node.setAttribute("data-portal", "true");
  if (typeof props.className === "string") {
    node.classList.add(...props.className.split(" "));
  }
  if (typeof props.style === "object") {
    Object.assign(node.style, props.style);
  }
  if (typeof props.id === "string") {
    node.setAttribute("id", props.id);
  }
  return node;
};
var defaultProps = {};
var Portal = forwardRef9((props, ref) => {
  const { children, target, ...others } = { ...defaultProps, ...props };
  const [mounted, setMounted] = useState(false);
  const nodeRef = useRef(null);
  useIsomorphicEffect(() => {
    setMounted(true);
    nodeRef.current = !target ? createPortalNode(others) : typeof target === "string" ? document.querySelector(target) : target;
    if (!nodeRef.current) return;
    assignRef(ref, nodeRef.current);
    if (!target && nodeRef.current) {
      document.body.appendChild(nodeRef.current);
    }
    return () => {
      if (!target && nodeRef.current) {
        document.body.removeChild(nodeRef.current);
      }
    };
  }, [target]);
  if (!mounted || !nodeRef.current) {
    return null;
  }
  return createPortal(/* @__PURE__ */ jsx9(Fragment, { children }), nodeRef.current);
});
Portal.displayName = "Portal";

// src/base/Stack/Stack.tsx
import { cn as cn8 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef10 } from "@paalan/react-shared/utils";
import { jsx as jsx10 } from "react/jsx-runtime";
var Stack = forwardRef10((props, ref) => {
  const { children, className, direction, ...restProps } = props;
  return /* @__PURE__ */ jsx10(Box, { className: cn8("flex flex-col gap-2", className), flexDirection: direction, ...restProps, ref, children });
});

// src/base/Text/Text.tsx
import { cn as cn9 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef11 } from "@paalan/react-shared/utils";
import { jsx as jsx11 } from "react/jsx-runtime";
var Text = forwardRef11((props, ref) => {
  const { children, className, as = "p", ...restProps } = props;
  return /* @__PURE__ */ jsx11(Box, { as, ref, className: cn9("", className), ...restProps, children });
});

// src/base/Typography/Typography.tsx
import { cn as cn10 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef12 } from "@paalan/react-shared/utils";
import { jsx as jsx12 } from "react/jsx-runtime";
var H1 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h1",
    ref,
    className: cn10("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
    ...props
  }
));
H1.displayName = "H1";
var H2 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h2",
    ref,
    className: cn10(
      "mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
      className
    ),
    ...props
  }
));
H2.displayName = "H2";
var H3 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "h3",
    ref,
    className: cn10("mt-8 scroll-m-20 text-2xl font-semibold tracking-tight", className),
    ...props
  }
));
H3.displayName = "H3";
var H4 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h4", ref, className: cn10("scroll-m-20 text-xl font-semibold tracking-tight", className), ...props }));
H4.displayName = "H4";
var H5 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h5", ref, className: cn10("scroll-m-20 text-lg font-semibold tracking-tight", className), ...props }));
H5.displayName = "H5";
var H6 = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "h6", ref, className: cn10("scroll-m-20 text-base font-semibold tracking-tight", className), ...props }));
H6.displayName = "H6";
var P = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("leading-7 [&:not(:first-child)]:mt-4", className), ...props }));
P.displayName = "P";
var BlockQuote = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
    Box,
    {
      as: "blockquote",
      ref,
      className: cn10(
        "mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200",
        className
      ),
      ...props
    }
  )
);
BlockQuote.displayName = "BlockQuote";
var TableLayout = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "table", ref, className: cn10("w-full", className), ...props })
);
TableLayout.displayName = "Table";
var THead = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "thead", ref, className: cn10("", className), ...props })
);
THead.displayName = "THead";
var TBody = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "tbody", ref, className: cn10("", className), ...props })
);
TBody.displayName = "TBody";
var TR = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "tr",
    ref,
    className: cn10(
      "m-0 border-t border-slate-300 p-0 even:bg-slate-100 dark:border-slate-700 dark:even:bg-slate-800",
      className
    ),
    ...props
  }
));
TR.displayName = "TR";
var TD = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "td",
    ref,
    className: cn10(
      "border border-slate-200 px-4 py-2 text-left dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TD.displayName = "TD";
var TH = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "th",
    ref,
    className: cn10(
      "border border-slate-200 px-4 py-2 text-left font-bold dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TH.displayName = "TH";
var UL = forwardRef12(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "ul",
    ref,
    className: cn10(
      {
        "m-4 list-disc [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
UL.displayName = "UL";
var OL = forwardRef12(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "ol",
    ref,
    className: cn10(
      {
        "m-4 list-decimal [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
OL.displayName = "OL";
var LI = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "li", ref, className: cn10("", className), ...props }));
LI.displayName = "LI";
var Code = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
  Box,
  {
    as: "code",
    ref,
    className: cn10("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-normal", className),
    ...props
  }
));
Code.displayName = "Code";
var Lead = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("text-xl text-muted-foreground", className), ...props }));
Lead.displayName = "Lead";
var Large = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "div", ref, className: cn10("text-lg font-semibold", className), ...props }));
Large.displayName = "Large";
var Small = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "small", ref, className: cn10("text-sm font-medium leading-none", className), ...props })
);
Small.displayName = "Small";
var Subtle = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "p", ref, className: cn10("text-sm text-muted-foreground", className), ...props }));
Subtle.displayName = "Subtle";
var Strong = forwardRef12(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(Box, { as: "strong", ref, className: cn10("font-semibold", className), ...props })
);
Strong.displayName = "Strong";

// src/base/VStack/VStack.tsx
import { cn as cn11 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef13 } from "@paalan/react-shared/utils";
import { jsx as jsx13 } from "react/jsx-runtime";
var VStack = forwardRef13((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx13(Box, { className: cn11("flex flex-col items-stretch gap-2", className), ...restProps, ref, children });
});

// src/base/Wrap/Wrap.tsx
import { cn as cn12 } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef14 } from "@paalan/react-shared/utils";
import { jsx as jsx14 } from "react/jsx-runtime";
var Wrap = forwardRef14((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx14(Box, { className: cn12("flex flex-wrap gap-2", className), ...restProps, ref, children });
});
var WrapItem = forwardRef14((props, ref) => {
  const { children, className, ...restProps } = props;
  return /* @__PURE__ */ jsx14(Box, { className: cn12("flex flex-none items-start", className), ...restProps, ref, children });
});

// src/components/Toast/components/HeadlessToast.tsx
import { jsx as jsx15, jsxs } from "react/jsx-runtime";
var HeadlessToast = ({ title, description, id, toast: toast2 }) => {
  return /* @__PURE__ */ jsxs(Box, { className: "toast-headless", children: [
    /* @__PURE__ */ jsx15(Text, { className: "toast-headless-title", children: title }),
    description && /* @__PURE__ */ jsx15(Text, { className: "toast-headless-description", children: description }),
    /* @__PURE__ */ jsx15("button", { className: "toast-headless-close", onClick: () => toast2.dismiss(id), children: /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx15("path", { d: "M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" }) }) })
  ] });
};

// src/components/Toast/state.tsx
import { jsx as jsx16 } from "react/jsx-runtime";
var toastsCounter = 1;
var Observer = class {
  subscribers;
  toasts;
  constructor() {
    this.subscribers = [];
    this.toasts = [];
  }
  // We use arrow functions to maintain the correct `this` reference
  subscribe = (subscriber) => {
    this.subscribers.push(subscriber);
    return () => {
      const index = this.subscribers.indexOf(subscriber);
      this.subscribers.splice(index, 1);
    };
  };
  publish = (data) => {
    this.subscribers.forEach((subscriber) => subscriber(data));
  };
  addToast = (data) => {
    this.publish(data);
    this.toasts = [...this.toasts, data];
  };
  create = (data) => {
    const { message, ...rest } = data;
    const id = typeof data?.id === "number" || data?.id && data.id.length && data.id.length > 0 ? data.id : toastsCounter++;
    const alreadyExists = this.toasts.find((toast2) => {
      return toast2.id === id;
    });
    const dismissible = data.dismissible === void 0 ? true : data.dismissible;
    if (alreadyExists) {
      this.toasts = this.toasts.map((toast2) => {
        if (toast2.id === id) {
          this.publish({ ...toast2, ...data, id, title: message });
          return {
            ...toast2,
            ...data,
            id,
            dismissible,
            title: message
          };
        }
        return toast2;
      });
    } else {
      this.addToast({ title: message, ...rest, dismissible, id });
    }
    return id;
  };
  dismiss = (id) => {
    if (!id) {
      this.toasts.forEach((toast2) => {
        this.subscribers.forEach((subscriber) => subscriber({ id: toast2.id, dismiss: true }));
      });
    } else {
      this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
    }
    return id;
  };
  message = (message, data) => {
    return this.create({ ...data, message });
  };
  error = (message, data) => {
    return this.create({ ...data, message, type: "error" });
  };
  success = (message, data) => {
    return this.create({ ...data, type: "success", message });
  };
  warning = (message, data) => {
    return this.create({ ...data, type: "warning", message });
  };
  info = (message, data) => {
    return this.create({ ...data, type: "info", message });
  };
  show = (message, { description, ...data } = {}) => {
    return this.custom((id) => /* @__PURE__ */ jsx16(HeadlessToast, { id, title: message, description, toast }), data);
  };
  loading = (message, data) => {
    return this.create({ ...data, type: "loading", message });
  };
  promise = (promise, data) => {
    if (!data) {
      return;
    }
    let id = void 0;
    if (data.loading !== void 0) {
      id = this.create({
        ...data,
        promise,
        type: "loading",
        message: data.loading
      });
    }
    const p = promise instanceof Promise ? promise : promise();
    let shouldDismiss = id !== void 0;
    p.then((promiseData) => {
      if (data.success !== void 0) {
        shouldDismiss = false;
        const message = typeof data.success === "function" ? data.success(promiseData) : data.success;
        this.create({ id, type: "success", message });
      }
    }).catch((error) => {
      if (data.error !== void 0) {
        shouldDismiss = false;
        const message = typeof data.error === "function" ? data.error(error) : data.error;
        this.create({ id, type: "error", message });
      }
    }).finally(() => {
      if (shouldDismiss) {
        this.dismiss(id);
        id = void 0;
      }
      data.finally?.();
    });
    return id;
  };
  // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
  custom = (jsx22, data) => {
    const id = data?.id || toastsCounter++;
    this.publish({ jsx: jsx22(id), id, ...data });
  };
};
var ToastState = new Observer();
var toastFunction = (message, data) => {
  const id = data?.id || toastsCounter++;
  ToastState.addToast({
    title: message,
    ...data,
    id
  });
  return id;
};
var basicToast = toastFunction;
var toast = Object.assign(basicToast, {
  success: ToastState.success,
  error: ToastState.error,
  warning: ToastState.warning,
  info: ToastState.info,
  show: ToastState.show,
  custom: ToastState.custom,
  message: ToastState.message,
  promise: ToastState.promise,
  dismiss: ToastState.dismiss,
  loading: ToastState.loading
});

// src/components/Toast/hooks.ts
var useToast = () => {
  return toast;
};

// src/components/Toast/Toaster.tsx
import React3 from "react";
import { flushSync } from "react-dom";

// src/components/Toast/constant.ts
var TOAST_LIFETIME = 5e3;
var GAP = 14;
var SWIPE_THRESHOLD = 20;
var TIME_BEFORE_UNMOUNT = 200;
var VISIBLE_TOASTS_AMOUNT = 3;
var VIEWPORT_OFFSET = "32px";
var TOAST_WIDTH = 356;

// src/components/Toast/helper.ts
import React from "react";
var isValidReactNode = (value) => {
  return typeof value === "string" || React.isValidElement(value);
};
var getDocumentDirection = () => {
  if (typeof window === "undefined") return "ltr";
  const dirAttribute = document.documentElement.getAttribute("dir");
  if (dirAttribute === "auto" || !dirAttribute) {
    return window.getComputedStyle(document.documentElement).direction;
  }
  return dirAttribute;
};

// src/components/Toast/Toast.tsx
import React2 from "react";
import { cn as cn15 } from "@paalan/react-shared/lib";

// src/components/Toast/assets.tsx
import { ErrorIcon, InfoIcon1, SuccessIcon, WarningIcon1 } from "@paalan/react-icons";
import { jsx as jsx17 } from "react/jsx-runtime";
var bars = Array(12).fill(0);
var Loader = ({ visible }) => {
  return /* @__PURE__ */ jsx17("div", { className: "toast-loading-wrapper", "data-visible": visible, children: /* @__PURE__ */ jsx17("div", { className: "toast-spinner", children: bars.map((_, i) => /* @__PURE__ */ jsx17("div", { className: "toast-loading-bar" }, `spinner-bar-${i}`)) }) });
};
var getAsset = (type) => {
  switch (type) {
    case "success":
      return /* @__PURE__ */ jsx17(SuccessIcon, {});
    case "error":
      return /* @__PURE__ */ jsx17(ErrorIcon, {});
    case "warning":
      return /* @__PURE__ */ jsx17(WarningIcon1, {});
    case "info":
      return /* @__PURE__ */ jsx17(InfoIcon1, {});
    default:
      return null;
  }
};

// src/components/Toast/components/ActionButton.tsx
import { cn as cn13 } from "@paalan/react-shared/lib";
import { jsx as jsx18 } from "react/jsx-runtime";
var ActionButton = ({ toast: toast2, deleteToast, className }) => {
  if (isValidReactNode(toast2.action)) return toast2.action;
  const onClick = toast2.action.onClick;
  return /* @__PURE__ */ jsx18(
    "button",
    {
      "data-button": true,
      onClick: (event) => {
        onClick?.(event);
        if (event.defaultPrevented) return;
        deleteToast();
      },
      className: cn13(className, toast2.action.className),
      children: toast2.action.label
    }
  );
};

// src/components/Toast/components/CancelButton.tsx
import { cn as cn14 } from "@paalan/react-shared/lib";
import { jsx as jsx19 } from "react/jsx-runtime";
var CancelButton = ({ toast: toast2, dismissible, deleteToast, className }) => {
  if (isValidReactNode(toast2.cancel)) return toast2.cancel;
  const onClick = toast2.cancel.onClick;
  return /* @__PURE__ */ jsx19(
    "button",
    {
      "data-button": true,
      "data-cancel": true,
      onClick: () => {
        if (!dismissible) return;
        deleteToast();
        onClick?.();
      },
      className: cn14(className, toast2.cancel.className),
      children: toast2.cancel.label
    }
  );
};

// src/components/Toast/Toast.tsx
import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs2 } from "react/jsx-runtime";
var Toast = (props) => {
  const {
    invert: ToasterInvert,
    toast: toast2,
    interacting,
    setHeights,
    visibleToasts,
    heights,
    index,
    toasts,
    expanded,
    removeToast,
    closeButton,
    style,
    cancelButtonClassName,
    actionButtonClassName,
    className = "",
    descriptionClassName = "",
    duration: durationFromToaster,
    position,
    loadingIcon: loadingIconProp,
    expandByDefault
  } = props;
  const [mounted, setMounted] = React2.useState(false);
  const [removed, setRemoved] = React2.useState(false);
  const [swiping, setSwiping] = React2.useState(false);
  const [swipeOut, setSwipeOut] = React2.useState(false);
  const [offsetBeforeRemove, setOffsetBeforeRemove] = React2.useState(0);
  const [initialHeight, setInitialHeight] = React2.useState(0);
  const dragStartTime = React2.useRef(null);
  const toastRef = React2.useRef(null);
  const isFront = index === 0;
  const isVisible = index + 1 <= visibleToasts;
  const toastType = toast2.type;
  const dismissible = toast2.dismissible !== false;
  const toastClassname = toast2.className || "";
  const toastDescriptionClassname = toast2.descriptionClassName || "";
  const heightIndex = React2.useMemo(
    () => heights.findIndex((height) => height.toastId === toast2.id) || 0,
    [heights, toast2.id]
  );
  const duration = React2.useMemo(
    () => toast2.duration || durationFromToaster || TOAST_LIFETIME,
    [toast2.duration, durationFromToaster]
  );
  const closeTimerStartTimeRef = React2.useRef(0);
  const offset = React2.useRef(0);
  const lastCloseTimerStartTimeRef = React2.useRef(0);
  const pointerStartRef = React2.useRef(null);
  const [y, x] = position.split("-");
  const toastsHeightBefore = React2.useMemo(() => {
    return heights.reduce((prev, curr, reducerIndex) => {
      if (reducerIndex >= heightIndex) {
        return prev;
      }
      return prev + curr.height;
    }, 0);
  }, [heights, heightIndex]);
  const invert = toast2.invert || ToasterInvert;
  const disabled = toastType === "loading";
  offset.current = React2.useMemo(() => heightIndex * GAP + toastsHeightBefore, [heightIndex, toastsHeightBefore]);
  React2.useEffect(() => {
    setMounted(true);
  }, []);
  React2.useLayoutEffect(() => {
    if (!mounted) return;
    const toastNode = toastRef.current;
    if (!toastNode) return;
    const originalHeight = toastNode.style.height;
    toastNode.style.height = "auto";
    const newHeight = toastNode.getBoundingClientRect().height;
    toastNode.style.height = originalHeight;
    setInitialHeight(newHeight);
    setHeights((heights2) => {
      const alreadyExists = heights2.find((height) => height.toastId === toast2.id);
      if (!alreadyExists) {
        return [{ toastId: toast2.id, height: newHeight }, ...heights2];
      } else {
        return heights2.map((height) => height.toastId === toast2.id ? { ...height, height: newHeight } : height);
      }
    });
  }, [mounted, toast2.title, toast2.description, setHeights, toast2.id]);
  const deleteToast = React2.useCallback(() => {
    setRemoved(true);
    setOffsetBeforeRemove(offset.current);
    setHeights((h) => h.filter((height) => height.toastId !== toast2.id));
    setTimeout(() => {
      removeToast(toast2);
    }, TIME_BEFORE_UNMOUNT);
  }, [toast2, removeToast, setHeights, offset]);
  React2.useEffect(() => {
    if (toast2.promise && toastType === "loading" || toast2.duration === Infinity) return;
    let timeoutId;
    let remainingTime = duration;
    const pauseTimer = () => {
      if (lastCloseTimerStartTimeRef.current < closeTimerStartTimeRef.current) {
        const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.current;
        remainingTime = remainingTime - elapsedTime;
      }
      lastCloseTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
    };
    const startTimer = () => {
      closeTimerStartTimeRef.current = (/* @__PURE__ */ new Date()).getTime();
      timeoutId = setTimeout(() => {
        toast2.onAutoClose?.(toast2);
        deleteToast();
      }, remainingTime);
    };
    if (expanded || interacting) {
      pauseTimer();
    } else {
      startTimer();
    }
    return () => clearTimeout(timeoutId);
  }, [expanded, interacting, expandByDefault, toast2, duration, deleteToast, toast2.promise, toastType]);
  React2.useEffect(() => {
    const toastNode = toastRef.current;
    if (toastNode) {
      const height = toastNode.getBoundingClientRect().height;
      setInitialHeight(height);
      setHeights((h) => [{ toastId: toast2.id, height }, ...h]);
      return () => setHeights((h) => h.filter((height2) => height2.toastId !== toast2.id));
    }
  }, [setHeights, toast2.id]);
  React2.useEffect(() => {
    if (toast2.delete) {
      deleteToast();
    }
  }, [deleteToast, toast2.delete]);
  function getLoadingIcon() {
    if (loadingIconProp) {
      return /* @__PURE__ */ jsx20(Box, { className: "toast-loader", "data-visible": toastType === "loading", children: loadingIconProp });
    }
    return /* @__PURE__ */ jsx20(Loader, { visible: toastType === "loading" });
  }
  return /* @__PURE__ */ jsxs2(
    "li",
    {
      "aria-live": toast2.important ? "assertive" : "polite",
      "aria-atomic": "true",
      role: "status",
      tabIndex: 0,
      ref: toastRef,
      className: cn15(className, toastClassname),
      "data-toast-toast": "",
      "data-styled": !(toast2.jsx || toast2.unstyled),
      "data-mounted": mounted,
      "data-promise": Boolean(toast2.promise),
      "data-removed": removed,
      "data-visible": isVisible,
      "data-y-position": y,
      "data-x-position": x,
      "data-index": index,
      "data-front": isFront,
      "data-swiping": swiping,
      "data-dismissible": dismissible,
      "data-type": toastType,
      "data-invert": invert,
      "data-swipe-out": swipeOut,
      "data-expanded": Boolean(expanded || expandByDefault && mounted),
      style: {
        "--index": index,
        "--toasts-before": index,
        "--z-index": toasts.length - index,
        "--offset": `${removed ? offsetBeforeRemove : offset.current}px`,
        "--initial-height": expandByDefault ? "auto" : `${initialHeight}px`,
        ...style,
        ...toast2.style
      },
      onPointerDown: (event) => {
        if (disabled || !dismissible) return;
        dragStartTime.current = /* @__PURE__ */ new Date();
        setOffsetBeforeRemove(offset.current);
        event.target.setPointerCapture(event.pointerId);
        if (event.target.tagName === "BUTTON") return;
        setSwiping(true);
        pointerStartRef.current = { x: event.clientX, y: event.clientY };
      },
      onPointerUp: () => {
        if (swipeOut || !dismissible) return;
        pointerStartRef.current = null;
        const swipeAmount = Number(toastRef.current?.style.getPropertyValue("--swipe-amount").replace("px", "") || 0);
        const timeTaken = dragStartTime.current ? (/* @__PURE__ */ new Date()).getTime() - dragStartTime.current.getTime() : 0;
        const velocity = Math.abs(swipeAmount) / timeTaken;
        if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
          setOffsetBeforeRemove(offset.current);
          toast2.onDismiss?.(toast2);
          deleteToast();
          setSwipeOut(true);
          return;
        }
        toastRef.current?.style.setProperty("--swipe-amount", "0px");
        setSwiping(false);
      },
      onPointerMove: (event) => {
        if (!pointerStartRef.current || !dismissible) return;
        const yPosition = event.clientY - pointerStartRef.current.y;
        const xPosition = event.clientX - pointerStartRef.current.x;
        const clamp = y === "top" ? Math.min : Math.max;
        const clampedY = clamp(0, yPosition);
        const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
        const isAllowedToSwipe = Math.abs(clampedY) > swipeStartThreshold;
        if (isAllowedToSwipe) {
          toastRef.current?.style.setProperty("--swipe-amount", `${yPosition}px`);
        } else if (Math.abs(xPosition) > swipeStartThreshold) {
          pointerStartRef.current = null;
        }
      },
      children: [
        closeButton && dismissible && !toast2.jsx && /* @__PURE__ */ jsx20(
          "button",
          {
            "aria-label": "Close toast",
            "data-disabled": disabled,
            "data-close-button": true,
            onClick: () => {
              if (disabled) return;
              deleteToast();
              toast2.onDismiss?.(toast2);
            },
            children: /* @__PURE__ */ jsxs2(
              "svg",
              {
                xmlns: "http://www.w3.org/2000/svg",
                width: "16",
                height: "16",
                viewBox: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                strokeWidth: "1.5",
                strokeLinecap: "round",
                strokeLinejoin: "round",
                children: [
                  /* @__PURE__ */ jsx20("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
                  /* @__PURE__ */ jsx20("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                ]
              }
            )
          }
        ),
        toast2.jsx || React2.isValidElement(toast2.title) ? toast2.jsx || toast2.title : /* @__PURE__ */ jsxs2(Fragment2, { children: [
          toastType || toast2.icon || toast2.promise ? /* @__PURE__ */ jsxs2("div", { "data-icon": "", children: [
            (toast2.promise || toast2.type === "loading") && !toast2.icon ? getLoadingIcon() : null,
            toast2.icon || toastType && getAsset(toastType)
          ] }) : null,
          /* @__PURE__ */ jsxs2("div", { "data-content": "", children: [
            /* @__PURE__ */ jsx20("div", { "data-title": "", children: toast2.title }),
            !!toast2.description && /* @__PURE__ */ jsx20("div", { "data-description": "", className: cn15(descriptionClassName, toastDescriptionClassname), children: toast2.description })
          ] }),
          (!!toast2.cancel || !!toast2.action) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2", children: [
            toast2.cancel && /* @__PURE__ */ jsx20(
              CancelButton,
              {
                toast: toast2,
                dismissible,
                deleteToast,
                className: cancelButtonClassName
              }
            ),
            toast2.action && /* @__PURE__ */ jsx20(ActionButton, { toast: toast2, deleteToast, className: actionButtonClassName })
          ] })
        ] })
      ]
    }
  );
};

// src/components/Toast/Toaster.tsx
import { jsx as jsx21 } from "react/jsx-runtime";
var Toaster = (props) => {
  const {
    invert,
    position = "top-right",
    hotkey = ["altKey", "KeyT"],
    expand,
    closeButton,
    className,
    offset,
    theme = "light",
    richColors,
    duration,
    style,
    visibleToasts = VISIBLE_TOASTS_AMOUNT,
    toastOptions,
    dir = getDocumentDirection(),
    gap = GAP,
    loadingIcon
  } = props;
  const [toasts, setToasts] = React3.useState([]);
  const possiblePositions = React3.useMemo(() => {
    const positions = toasts.filter((toast2) => !!toast2.position).map((toast2) => toast2.position);
    return Array.from(new Set([position].concat(positions)));
  }, [toasts, position]);
  const [heights, setHeights] = React3.useState([]);
  const [expanded, setExpanded] = React3.useState(false);
  const [interacting, setInteracting] = React3.useState(false);
  const [actualTheme, setActualTheme] = React3.useState(
    theme !== "system" ? theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light"
  );
  const listRef = React3.useRef(null);
  const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
  const lastFocusedElementRef = React3.useRef();
  const isFocusWithinRef = React3.useRef(false);
  const removeToast = React3.useCallback(
    (toast2) => setToasts((toasts2) => toasts2.filter(({ id }) => id !== toast2.id)),
    []
  );
  React3.useEffect(() => {
    return ToastState.subscribe((toast2) => {
      if (toast2.dismiss) {
        setToasts((toasts2) => toasts2.map((t) => t.id === toast2.id ? { ...t, delete: true } : t));
        return;
      }
      setTimeout(() => {
        flushSync(() => {
          setToasts((toasts2) => {
            const indexOfExistingToast = toasts2.findIndex((t) => t.id === toast2.id);
            if (indexOfExistingToast !== -1) {
              return [
                ...toasts2.slice(0, indexOfExistingToast),
                { ...toasts2[indexOfExistingToast], ...toast2 },
                ...toasts2.slice(indexOfExistingToast + 1)
              ];
            }
            return [toast2, ...toasts2];
          });
        });
      });
    });
  }, []);
  React3.useEffect(() => {
    if (theme !== "system") {
      setActualTheme(theme);
      return;
    }
    if (theme === "system") {
      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
        setActualTheme("dark");
      } else {
        setActualTheme("light");
      }
    }
    if (typeof window === "undefined") return;
    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => {
      if (matches) {
        setActualTheme("dark");
      } else {
        setActualTheme("light");
      }
    });
  }, [theme]);
  React3.useEffect(() => {
    if (toasts.length <= 1) {
      setExpanded(false);
    }
  }, [toasts]);
  React3.useEffect(() => {
    const handleKeyDown = (event) => {
      const isHotkeyPressed = hotkey.every((key) => {
        return event[key] || event.code === key;
      });
      if (isHotkeyPressed) {
        setExpanded(true);
        listRef.current?.focus();
      }
      if (event.code === "Escape" && (document.activeElement === listRef.current || listRef.current?.contains(document.activeElement))) {
        setExpanded(false);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [hotkey]);
  React3.useEffect(() => {
    if (listRef.current) {
      return () => {
        if (lastFocusedElementRef.current) {
          lastFocusedElementRef.current.focus({ preventScroll: true });
          lastFocusedElementRef.current = void 0;
          isFocusWithinRef.current = false;
        }
      };
    }
  }, []);
  if (!toasts.length) return null;
  return (
    // Remove item from normal navigation flow, only available via hotkey
    /* @__PURE__ */ jsx21("section", { "aria-label": `Notifications ${hotkeyLabel}`, tabIndex: -1, children: possiblePositions.map((position2, index) => {
      const [y, x] = position2.split("-");
      return /* @__PURE__ */ jsx21(
        "ol",
        {
          dir: dir === "auto" ? getDocumentDirection() : dir,
          tabIndex: -1,
          ref: listRef,
          className,
          "data-toast-toaster": true,
          "data-theme": actualTheme,
          "data-rich-colors": richColors,
          "data-y-position": y,
          "data-x-position": x,
          style: {
            "--front-toast-height": `${heights[0]?.height}px`,
            "--offset": typeof offset === "number" ? `${offset}px` : offset || VIEWPORT_OFFSET,
            "--width": `${TOAST_WIDTH}px`,
            "--gap": `${gap}px`,
            ...style
          },
          onBlur: (event) => {
            if (isFocusWithinRef.current && !event.currentTarget.contains(event.relatedTarget)) {
              isFocusWithinRef.current = false;
              if (lastFocusedElementRef.current) {
                lastFocusedElementRef.current.focus({ preventScroll: true });
                lastFocusedElementRef.current = void 0;
              }
            }
          },
          onFocus: (event) => {
            const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
            if (isNotDismissible) return;
            if (!isFocusWithinRef.current) {
              isFocusWithinRef.current = true;
              lastFocusedElementRef.current = event.relatedTarget;
            }
          },
          onMouseEnter: () => setExpanded(true),
          onMouseMove: () => setExpanded(true),
          onMouseLeave: () => {
            if (!interacting) {
              setExpanded(false);
            }
          },
          onPointerDown: (event) => {
            const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
            if (isNotDismissible) return;
            setInteracting(true);
          },
          onPointerUp: () => setInteracting(false),
          children: toasts.filter((toast2) => !toast2.position && index === 0 || toast2.position === position2).map((toast2, index2) => /* @__PURE__ */ jsx21(
            Toast,
            {
              index: index2,
              toast: toast2,
              duration: toastOptions?.duration ?? duration,
              className: toastOptions?.className,
              descriptionClassName: toastOptions?.descriptionClassName,
              invert: invert ?? false,
              visibleToasts,
              closeButton: closeButton ?? false,
              interacting,
              position: position2,
              style: toastOptions?.style,
              removeToast,
              toasts,
              heights,
              setHeights,
              expandByDefault: expand ?? false,
              expanded,
              cancelButtonClassName: toastOptions?.cancelButtonClassName,
              actionButtonClassName: toastOptions?.actionButtonClassName,
              gap,
              loadingIcon
            },
            toast2.id
          ))
        },
        position2
      );
    }) })
  );
};
export {
  Toaster,
  toast,
  useToast
};
