import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { transform, map, mergeWith, uniqueId, slice, findKey } from 'lodash-es';
import { createClassed, classed as classed$1, deriveClassed } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import clsx6 from 'clsx';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import * as ToastPrimitive from '@radix-ui/react-toast';
import React2, { forwardRef, useState, useMemo, useLayoutEffect } from 'react';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { XMarkIcon } from '@heroicons/react/24/solid';
import { motion, AnimatePresence, interpolate, easeIn } from 'framer-motion';
import { proxy, useSnapshot } from 'valtio';
import { mergeRefs } from 'react-merge-refs';
import useDimensions from 'react-cool-dimensions';
import * as Tooltip from '@radix-ui/react-tooltip';
import { jsxs as jsxs$1, jsx as jsx$1, Fragment as Fragment$1 } from 'valtio-signal/jsx-runtime';

var __defProp = Object.defineProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};

// src/components/Toast/Toast.tsx
var Toast_exports = {};
__export(Toast_exports, {
  Action: () => Action2,
  Close: () => Close2,
  Container: () => Container,
  Description: () => Description2,
  Title: () => Title2,
  ToastAction: () => ToastAction,
  ToastViewportElement: () => ToastViewportElement,
  Viewport: () => Viewport2
});
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
var classedVariantMap = (variantMap) => variantMap;
function generateCompoundVariants(compoundVariantPropMap) {
  const { commonVariantProps, compoundVariantMapLists } = transform(
    compoundVariantPropMap,
    (result, value, key) => {
      if (typeof value === "boolean" || typeof value === "string") {
        result.commonVariantProps[key] = value;
        return result;
      }
      const compoundVariantMapList = map(value, (className, variantMapKey) => ({
        [key]: variantMapKey,
        class: className
      }));
      result.compoundVariantMapLists.push(compoundVariantMapList);
      return result;
    },
    {
      commonVariantProps: {},
      compoundVariantMapLists: []
    }
  );
  return compoundVariantMapLists.flat().map(({ class: cls, ...props }) => {
    return {
      ...commonVariantProps,
      class: twMerge(cls, compoundVariantPropMap.className),
      ...props
    };
  });
}

// src/utils/notEmpty.ts
function notEmpty(value) {
  return value !== null && value !== void 0;
}

// src/utils/classed/expandVariant.ts
var expandVariant = createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var sizeVariants = {
  width: {
    xs: clsx6("w-28"),
    sm: clsx6("w-34"),
    md: clsx6("w-40"),
    lg: clsx6("w-48")
  },
  height: {
    xs: clsx6("h-28"),
    sm: clsx6("h-34"),
    md: clsx6("h-40"),
    lg: clsx6("h-48")
  },
  inlineWidth: {
    xs: clsx6("w-16 text-xs"),
    sm: clsx6("w-20 text-xs"),
    md: clsx6("w-22 text-xs"),
    lg: clsx6("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx6("h-16 text-xs"),
    sm: clsx6("h-20 text-xs"),
    md: clsx6("h-22 text-xs"),
    lg: clsx6("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx6("px-4"),
    sm: clsx6("px-6"),
    md: clsx6("px-8"),
    lg: clsx6("px-10")
  },
  extraPaddingX: {
    xs: clsx6("px-14"),
    sm: clsx6("px-16"),
    md: clsx6("px-18"),
    lg: clsx6("px-20")
  }
};

// src/styles/input-component.variants.ts
var inputComponentVariants = classedVariantMap({
  size: sizeVariants,
  rounded: {
    roundedLeft: "rounded-r-0 rounded-l-md",
    roundedRight: "rounded-l-0 rounded-r-md",
    rounded: "rounded-md"
  }
});
classed$1("div", {
  variants: {
    orientation: {
      horizontal: "inline-flex flex-row items-center ",
      vertical: "flex flex-col justify-center"
    }
  }
});
var inputComponentWidths = {
  xs: clsx6("w-168"),
  sm: clsx6("w-184"),
  md: clsx6("w-216"),
  lg: clsx6("w-400")
};
var inputComponentMinWidths = {
  none: "",
  xs: clsx6("min-w-[168px]"),
  sm: clsx6("min-w-[184px]"),
  md: clsx6("min-w-[216px]"),
  lg: clsx6("min-w-[400px]")
};
classed$1("div", {
  variants: {
    size: {
      xs: "",
      sm: "",
      md: "",
      lg: ""
    },
    minWidth: inputComponentMinWidths,
    width: {
      autoWidth: "w-auto",
      fullWidth: "!w-full",
      fixedWidth: ""
    }
  },
  defaultVariants: {
    width: "fixedWidth",
    size: "md"
  },
  compoundVariants: [
    { size: "xs", width: "fixedWidth", class: inputComponentWidths.xs },
    { size: "sm", width: "fixedWidth", class: inputComponentWidths.sm },
    { size: "md", width: "fixedWidth", class: inputComponentWidths.md },
    { size: "lg", width: "fixedWidth", class: inputComponentWidths.lg }
  ]
});
var inputSizeVariants = mergeVariants([
  inputComponentVariants.size.lineHeight,
  inputComponentVariants.size.paddingX,
  inputComponentVariants.size.paddingY,
  inputComponentVariants.size.textSize
]);
classed$1("div", "inline-flex", {
  variants: {
    size: inputSizeVariants
  }
});
var headingTextSize = {
  h1: clsx6("text-h1"),
  h2: clsx6("text-h2"),
  h3: clsx6("text-h3"),
  h4: clsx6("text-h4"),
  h5: clsx6("text-h5"),
  h6: clsx6("text-h6")
};
var textSize = {
  xs: clsx6("text-xs"),
  sm: clsx6("text-sm"),
  md: clsx6("text-md"),
  lg: clsx6("text-lg")
};
var textVariants = {
  fontWeight: {
    regular: clsx6("font-regular"),
    medium: clsx6("font-medium"),
    bold: clsx6("font-bold")
  },
  size: {
    ...textSize,
    ...headingTextSize
  },
  font: {
    body: "font-body",
    heading: "font-heading",
    mono: "font-mono"
  },
  leading: {
    none: clsx6("leading-none"),
    xs: clsx6("leading-xs"),
    sm: clsx6("leading-sm"),
    md: clsx6("leading-md"),
    lg: clsx6("leading-lg"),
    h1: clsx6("leading-h1"),
    h2: clsx6("leading-h2"),
    h3: clsx6("leading-h3"),
    h4: clsx6("leading-h4"),
    h5: clsx6("leading-h5"),
    h6: clsx6("leading-h6")
  },
  spaceY: {
    xs: clsx6("space-y-4"),
    sm: clsx6("space-y-6"),
    md: clsx6("space-y-8"),
    lg: clsx6("space-y-16")
  },
  spaceX: {
    xs: clsx6("space-x-4"),
    sm: clsx6("space-x-6"),
    md: clsx6("space-x-8"),
    lg: clsx6("space-x-16")
  },
  color: {
    inherit: clsx6("text-inherit"),
    current: clsx6("text-current"),
    tint: clsx6("text-content-tint"),
    ghost: clsx6("text-content-ghost"),
    subtle: clsx6("text-content-subtle"),
    medium: clsx6("text-content"),
    weak: clsx6("text-content-weak"),
    moderate: clsx6("text-content-moderate"),
    high: clsx6("text-content-high"),
    intense: clsx6("text-content-intense"),
    strong: clsx6("text-content-intense"),
    inverse: clsx6("text-inverse"),
    danger: clsx6("text-danger")
  },
  align: {
    center: clsx6("text-center"),
    right: clsx6("text-right"),
    left: clsx6("text-left"),
    start: clsx6("text-left"),
    end: clsx6("text-end")
  },
  maxLines: {
    1: "line-clamp-1",
    2: "line-clamp-2",
    3: "line-clamp-3",
    4: "line-clamp-4",
    5: "line-clamp-5",
    6: "line-clamp-6"
  }
};

// src/components/Button/Button.styles.tsx
var buttonVariants = {
  variants: {
    loading: {
      true: "cursor-default"
    },
    cursorPointer: {
      false: "cursor-auto"
    },
    size: mergeVariants(
      [inputComponentVariants.size.paddingX, inputComponentVariants.size.paddingY],
      {
        xs: "text-xs px-6",
        sm: "text-sm",
        md: "text-sm",
        lg: "text-sm"
      }
    ),
    fontWeight: textVariants.fontWeight,
    noWrap: {
      true: "whitespace-nowrap"
    },
    inline: {
      true: "inline"
    },
    justify: {
      center: "justify-center",
      start: "justify-start",
      end: "justify-end"
    },
    fullWidth: {
      true: "w-full"
    },
    hoverable: {
      true: ""
    },
    variant: {
      filled: "",
      outlined: "ring-[1.35px] ring-inset",
      glass: "",
      text: "",
      ghost: ""
    },
    rounded: {
      sm: clsx6("rounded "),
      default: clsx6("rounded"),
      true: "rounded-full"
    },
    gradient: {
      true: ""
    },
    coloredShadow: {
      true: ""
    },
    extraRoundedPadding: {
      true: ""
    },
    color: {
      primary: "",
      secondary: "",
      surface: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    hoverBackgroundColor: {
      primary: "",
      secondary: "",
      inverse: "",
      info: "",
      success: "",
      danger: "",
      caution: "",
      heart: ""
    },
    backgroundNoise: {
      true: "noisy-surface-texture"
    },
    gap: {
      true: ""
    }
  },
  compoundVariants: [
    ...generateCompoundVariants({
      gap: true,
      size: {
        xs: clsx6("gap-4"),
        sm: clsx6("gap-6"),
        md: clsx6("gap-6"),
        lg: clsx6("gap-6")
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      color: {
        primary: "filled-accent-primary",
        secondary: "filled-accent-secondary",
        inverse: "filled-accent-inverse",
        heart: "filled-accent-heart",
        info: "filled-accent-info",
        success: "filled-accent-success",
        danger: "filled-accent-danger",
        caution: "filled-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverable: true,
      color: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "filled",
      hoverBackgroundColor: {
        primary: "filled-hover-accent-primary",
        secondary: "filled-hover-accent-secondary",
        inverse: "filled-hover-accent-inverse",
        heart: "filled-hover-accent-heart",
        info: "filled-hover-accent-info",
        success: "filled-hover-accent-success",
        danger: "filled-hover-accent-danger",
        caution: "filled-hover-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      hoverBackgroundColor: {
        primary: "hover:glass-accent-primary",
        secondary: "hover:glass-accent-secondary",
        inverse: "hover:glass-accent-inverse",
        heart: "hover:glass-accent-heart",
        info: "hover:glass-accent-info",
        success: "hover:glass-accent-success",
        danger: "hover:glass-accent-danger",
        caution: "hover:glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "glass",
      className: "overflow-hidden",
      color: {
        primary: "glass-accent-primary",
        secondary: "glass-accent-secondary",
        inverse: "glass-accent-inverse",
        heart: "glass-accent-heart",
        info: "glass-accent-info",
        success: "glass-accent-success",
        danger: "glass-accent-danger",
        caution: "glass-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "ghost",
      className: "overflow-hidden bg-transparent",
      color: {
        primary: "ghost-accent-primary",
        secondary: "ghost-accent-secondary",
        inverse: "ghost-accent-inverse",
        heart: "ghost-accent-heart",
        info: "ghost-accent-info",
        success: "ghost-accent-success",
        danger: "ghost-accent-danger",
        caution: "ghost-accent-caution"
      }
    }),
    ...generateCompoundVariants({
      variant: "outlined",
      className: "overflow-hidden z-0 bg-surface-soft",
      color: {
        primary: "ring-boundary-weak",
        secondary: "ring-boundary-weak",
        inverse: "text-inverse ring-inverse",
        heart: "text-heart ring-heart",
        info: "text-info ring-info",
        success: "text-success ring-success",
        danger: "text-danger ring-danger",
        caution: "text-caution ring-caution"
      }
    }),
    // Colored Shadow
    ...generateCompoundVariants({
      coloredShadow: true,
      className: clsx6("shadow-lg "),
      color: {
        primary: "shadow-primary/70",
        secondary: "shadow-secondary/70",
        inverse: "shadow-inverse/70",
        heart: "shadow-heart/70",
        info: "shadow-info/70",
        success: "shadow-success/70",
        danger: "shadow-danger/70",
        caution: "shadow-caution/70"
      }
    }),
    // Gradient
    ...generateCompoundVariants({
      gradient: true,
      variant: "filled",
      className: clsx6("border-none transition-all hover:brightness-[1.05]"),
      color: {
        primary: clsx6("bg-gradient-primary-dark-to-light-tr"),
        secondary: clsx6("bg-gradient-secondary-dark-to-light-tr"),
        inverse: clsx6("bg-gradient-inverse-dark-to-light-tr"),
        heart: clsx6("bg-gradient-heart-dark-to-light-tr"),
        info: clsx6("bg-gradient-info-dark-to-light-tr"),
        success: clsx6("bg-gradient-success-dark-to-light-tr"),
        danger: clsx6("bg-gradient-danger-dark-to-light-tr"),
        caution: clsx6("bg-gradient-caution-dark-to-light-tr")
      }
    }),
    // Extra Padding X
    ...generateCompoundVariants({
      rounded: true,
      extraRoundedPadding: true,
      size: sizeVariants.extraPaddingX
    })
  ]
};
var ButtonElement = classed.button(
  "inline-flex font-medium items-center justify-center select-none align-middle",
  "disabled:text-content-tint disabled:cursor-default disabled:pointer-events-none relative",
  "transition-colors duration-100",
  "box-border",
  "shrink-0",
  {
    defaultVariants: {
      size: "md",
      rounded: "default",
      noWrap: true,
      fontWeight: "medium",
      hoverable: true,
      color: "primary",
      justify: "center",
      variant: "filled",
      extraRoundedPadding: true,
      gap: true
    },
    variants: buttonVariants.variants,
    compoundVariants: buttonVariants.compoundVariants
  }
);
var InlineButtonIconElement = classed("span", "flex items-center justify-center", {
  variants: {
    size: {
      xs: "h-12 w-12",
      sm: "h-14 w-14",
      md: "h-16 w-16",
      lg: "h-18 w-18"
    },
    offset: {
      right: "-mr-6",
      left: "-ml-6"
    }
  },
  defaultVariants: { size: "md" }
});
var InlineButtonIcon = ({
  offset,
  position,
  size,
  icon,
  className
}) => {
  return Boolean(className || icon) ? /* @__PURE__ */ jsx(
    InlineButtonIconElement,
    {
      size,
      className,
      offset: offset ? position : void 0,
      children: icon
    }
  ) : null;
};
var ButtonComponent = forwardRef(
  ({
    size = "md",
    startIcon,
    endIcon,
    startIconClassName,
    endIconClassName,
    children,
    variant = "filled",
    color = "primary",
    rounded,
    extraRoundedPadding: extraRoundedPaddingProp,
    ...props
  }, ref) => {
    function getExtraRoundedPaddingProp() {
      if (extraRoundedPaddingProp)
        return extraRoundedPaddingProp;
      if (variant === "ghost" || variant === "text")
        return false;
      return true;
    }
    const extraRoundedPadding = getExtraRoundedPaddingProp();
    const inlineButtonIconProps = {
      size,
      offset: Boolean(rounded && extraRoundedPadding)
    };
    return /* @__PURE__ */ jsxs(
      ButtonElement,
      {
        variant,
        color,
        extraRoundedPadding,
        rounded,
        size,
        ...props,
        ref,
        children: [
          /* @__PURE__ */ jsx(
            InlineButtonIcon,
            {
              position: "left",
              icon: startIcon,
              className: startIconClassName,
              ...inlineButtonIconProps
            }
          ),
          children,
          /* @__PURE__ */ jsx(
            InlineButtonIcon,
            {
              position: "right",
              icon: endIcon,
              className: endIconClassName,
              ...inlineButtonIconProps
            }
          )
        ]
      }
    );
  }
);
var Button = deriveClassed((props, ref) => /* @__PURE__ */ jsx(ButtonComponent, { ...props, ref }));
var IconButtonElement = classed("button", ButtonElement, "p-8 shrink-0", {
  variants: {
    size: mergeVariants([sizeVariants.width, sizeVariants.height])
  }
});
var IconButton = forwardRef(
  ({ className, children, ...props }, ref) => {
    return /* @__PURE__ */ jsx(IconButtonElement, { ...props, className, ref, extraRoundedPadding: false, children });
  }
);
var CloseButton = forwardRef(
  ({ className, animated, color = "secondary", ...props }, ref) => {
    return /* @__PURE__ */ jsx(
      IconButton,
      {
        ref,
        size: "sm",
        variant: "ghost",
        color,
        rounded: true,
        ...props,
        className: twMerge$1(
          clsx6("text-content-subtle hover:text-content-weak", {
            "opacity-50 transition-opacity duration-300 ease-in-out group-hover:opacity-100": animated
          }),
          className
        ),
        children: /* @__PURE__ */ jsx(XMarkIcon, { className: clsx6("fill-current") })
      }
    );
  }
);
var toastState = proxy({
  toasts: [],
  toastTimeOuts: /* @__PURE__ */ new Map(),
  newToastStackCount: 1,
  maxToasts: 5,
  isStacked: false,
  showAllToasts: false
});
function dismissToast(toastId) {
  if (!toastState.toastTimeOuts.has(toastId)) {
    const toast2 = toastState.toasts.find(({ id }) => id === toastId);
    const timeout = setTimeout(() => {
      toastState.toastTimeOuts.delete(toastId);
      toastState.toasts = toastState.toasts.filter((toast3) => {
        return toast3.id !== toastId;
      });
    }, toast2.duration ?? 0);
    updateToast({ id: toastId, closing: true });
    toastState.toastTimeOuts.set(toastId, timeout);
  }
}
function updateToast(toastData) {
  toastState.toasts = toastState.toasts.map((toast2) => {
    if (toast2.id === toastData.id) {
      return { ...toast2, ...toastData };
    }
    return toast2;
  });
}
var toastActions = {
  addToast: (payload) => {
    toastState.toasts.push(payload);
    const { toasts, maxToasts, showAllToasts } = toastState;
    if (toasts.length > maxToasts && !showAllToasts) {
      toastState.isStacked = true;
    }
  },
  removeToast: (toastId) => {
    toastState.toasts = toastState.toasts.filter(({ id }) => id !== toastId);
    toastState.toastTimeOuts.delete(toastId);
    const { toasts, maxToasts } = toastState;
    if (toasts.length <= maxToasts) {
      toastState.isStacked = false;
    }
  },
  updateToast,
  dismissToast,
  dismissToasts: () => {
    toastState.toasts.forEach((toast2) => {
      dismissToast(toast2.id);
    });
    toastState.isStacked = false;
    toastState.showAllToasts = false;
  },
  toggleStacked: (payload) => {
    toastState.isStacked = payload === void 0 ? toastState.isStacked : payload;
  },
  toggleMaxStacked: () => {
    const { toasts, maxToasts } = toastState;
    toastState.isStacked = toasts.length > maxToasts;
  },
  toggleShowAllToasts: (payload) => {
    if (payload) {
      toastState.showAllToasts = true;
      toastState.isStacked = false;
    } else {
      const { toasts, maxToasts } = toastState;
      toastState.showAllToasts = false;
      toastState.isStacked = toasts.length > maxToasts;
    }
  }
};
function toast({ autoDismiss = true, ...props }) {
  const id = uniqueId("toast");
  function update(props2) {
    toastActions.updateToast({ ...props2, id });
  }
  function dismiss() {
    toastActions.dismissToast(id);
  }
  toastActions.addToast({
    ...props,
    open: true,
    id,
    onOpenChange: (open) => {
      if (!open && autoDismiss) {
        dismiss();
      }
    }
  });
  return {
    id,
    dismiss,
    update
  };
}

// src/constants/theme.ts
var LIGHT_MODE = "light";
var DARK_MODE = "dark";
var DEFAULT_THEME = DARK_MODE;

// src/utils/environment-utils.ts
function isClientSide() {
  return typeof window !== "undefined";
}

// src/hooks/useDarkMode.tsx
var getInitialIsDarkMode = (fallback) => {
  if (!isClientSide())
    return DEFAULT_THEME === DARK_MODE;
  const savedTheme = localStorage.getItem("color-theme");
  if (!savedTheme) {
    return Boolean(fallback);
  }
  return savedTheme === DARK_MODE;
};
var useDarkMode = () => {
  const initialIsDarkMode = getInitialIsDarkMode();
  const [isDarkMode, setIsDarkMode] = useState(initialIsDarkMode);
  function setDarkMode(enabled) {
    if (!isClientSide()) {
      return;
    }
    const htmlTag = document.documentElement;
    if (enabled) {
      htmlTag.classList.add(DARK_MODE);
      htmlTag.setAttribute("data-mode", DARK_MODE);
      localStorage.setItem("color-theme", DARK_MODE);
    } else {
      htmlTag.classList.remove(DARK_MODE);
      htmlTag.removeAttribute("data-mode");
      localStorage.setItem("color-theme", LIGHT_MODE);
    }
    setIsDarkMode(enabled);
  }
  const toggleDarkMode = () => {
    setDarkMode(!isDarkMode);
  };
  useLayoutEffect(() => {
    if (initialIsDarkMode !== isDarkMode) {
      setDarkMode(initialIsDarkMode);
    }
  }, [initialIsDarkMode, isDarkMode]);
  return { isDarkMode, setDarkMode, toggleDarkMode };
};
function useIsDarkMode() {
  const { isDarkMode } = useDarkMode();
  return isDarkMode;
}
function Wrap({
  children,
  if: conditionProp,
  wrap: wrapper,
  fallback
}) {
  const fallbackWrapperFn = fallback ?? ((c) => /* @__PURE__ */ jsx(Fragment, { children: c }));
  if (!Boolean(conditionProp))
    return fallbackWrapperFn(children);
  const getCondition = () => {
    if (typeof conditionProp === "object") {
      return findKey(conditionProp, (e) => Boolean(e));
    }
    return conditionProp;
  };
  const condition = getCondition();
  const getWrapperFn = () => {
    if (typeof wrapper === "function")
      return wrapper;
    if (typeof wrapper === "object" && typeof condition === "string" && condition in wrapper) {
      return wrapper[condition];
    }
    return fallbackWrapperFn;
  };
  const wrapperFn = getWrapperFn();
  if (typeof condition === "boolean") {
    return Boolean(condition) ? wrapperFn(children) : /* @__PURE__ */ jsx(Fragment, { children });
  }
  return wrapperFn(children);
}
var ToastContainerElement = motion(
  classed(
    "div",
    "bg-surface",
    "border border-highlight-moderate",
    "relative",
    "p-10 rounded",
    // 'mb-4 md:mb-8 first:mb-0',
    "mb-4 md:mb-8",
    "active:cursor-grabbing",
    "shadow-lg",
    "w-full max-w-[400px]",
    {
      variants: {
        stacked: {
          true: "absolute bottom-0"
        },
        firstStackItem: {
          true: "mb-0"
        }
      }
    }
  )
);
var ToastViewportElement = motion(
  classed(
    ToastPrimitive.Viewport,
    "fixed bottom-0 z-[100]",
    "list-none",
    "max-h-screen",
    "flex flex-col-reverse",
    "right-0 w-full",
    expandVariant(`
      md:(max-w-[400px])
      sm:(top-auto,bottom-0,right-0)`)
  )
);
var ToastViewport = forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(ToastViewportElement, { ...props, ref });
});
var ToastContainer = React2.forwardRef(
  ({ children, id, index = 0, ...props }, forwardRef5) => {
    const { toasts, isStacked } = useSnapshot(toastState);
    const [swipeComplete, setSwipeComplete] = useState(false);
    const { observe } = useDimensions();
    const ref = mergeRefs([forwardRef5, observe]);
    const custom = { index, count: toasts.length };
    const animate = {
      opacity: [0, 0.9, 1],
      y: 0
    };
    const initial = {
      // opacity: isStacked ? (index === 0 ? 1 : [0, 0.9, 1]) : 0,
      opacity: 0,
      y: isStacked ? 0 : 40,
      position: "relative"
    };
    const isDarkMode = useIsDarkMode();
    const toastMotionVariants = {
      initial,
      animate,
      exit: { opacity: 0 },
      exitStacked: { opacity: 0, y: 0 },
      initialStacked: { y: 0, opacity: index === 0 ? 1 : 0 },
      animateStacked: ({ index: index2, count }) => {
        const input = [0, count - 1];
        const lightModeBrightness = interpolate([0, count], [1, 1.5])(index2);
        const darkModeBrightness = interpolate(input, [1, 0.3])(index2);
        const brightness = isDarkMode ? darkModeBrightness : lightModeBrightness;
        const zIndex = interpolate(input, [100, 50])(index2);
        const opacity = interpolate(input, [1, 0], { ease: easeIn })(index2);
        const blur = interpolate(input, [0, 1.2])(index2);
        const scaleX = interpolate(input, [1, 0.7])(index2);
        const y = interpolate(input, [0, -30])(index2);
        return {
          opacity,
          scaleX,
          transition: { bounce: 0, duration: 2, restSpeed: 0.5 },
          x: 0,
          y: index2 === 0 ? 0 : y,
          zIndex,
          position: "absolute",
          filter: `brightness(${brightness}) blur(${blur}px)`
          // backdropFilter: ``,
          // right: 8,
        };
      }
    };
    return /* @__PURE__ */ jsx(
      ToastPrimitive.Root,
      {
        onSwipeEnd: () => {
          setSwipeComplete(true);
        },
        onSwipeStart: () => {
          setSwipeComplete(false);
        },
        ...props,
        forceMount: true,
        id,
        asChild: true,
        ref,
        children: /* @__PURE__ */ jsx(motion.li, { layout: true, className: "group relative w-full max-w-[400px] px-8", children: /* @__PURE__ */ jsx(
          Wrap,
          {
            if: isStacked,
            wrap: (c) => /* @__PURE__ */ jsx(motion.div, { layout: true, className: "relative", children: c }),
            children: /* @__PURE__ */ jsx(ToastViewportActions, { index, children: /* @__PURE__ */ jsx(
              ToastContainerElement,
              {
                variants: toastMotionVariants,
                custom,
                exit: "exit",
                initial: "initial",
                animate: isStacked ? "animateStacked" : "animate",
                drag: "x",
                dragDirectionLock: true,
                dragConstraints: { left: 0, right: 600 },
                dragElastic: 0.05,
                layoutId: id,
                layout: "position",
                className: "right-0",
                dragSnapToOrigin: !swipeComplete,
                firstStackItem: isStacked && index === 0,
                stacked: isStacked,
                children
              }
            ) })
          }
        ) })
      }
    );
  }
);
var ToastViewportActionButton = ({
  children,
  onClick,
  ...props
}) => {
  const isDarkMode = useIsDarkMode();
  return /* @__PURE__ */ jsx(
    Button,
    {
      "data-color-scheme": isDarkMode ? void 0 : "default",
      size: "xs",
      rounded: true,
      color: "inverse",
      variant: "glass",
      ...props,
      onClick: (e) => {
        e.stopPropagation();
        onClick?.(e);
      },
      children
    }
  );
};
var ToastViewportActions = ({
  children,
  index
}) => {
  const { toasts, showAllToasts, isStacked } = useSnapshot(toastState);
  const isFirstStackItem = isStacked && index === 0;
  const isFirstListItem = !isStacked && index === toasts.length - 1;
  const [open, setOpen] = useState(false);
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
    Tooltip.Root,
    {
      delayDuration: 0,
      open,
      onOpenChange: (open2) => {
        setOpen(open2);
      },
      children: [
        /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children }),
        /* @__PURE__ */ jsx(Tooltip.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
          Tooltip.Content,
          {
            align: "end",
            sideOffset: -2,
            className: clsx6("pb-8", {
              "gradient-mask-t-90 z-[101]  p-16 pb-8": isStacked
            }),
            children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
              motion.div,
              {
                className: clsx6("relative flex w-full min-w-[200px] justify-end gap-6"),
                initial: { y: "150%", zIndex: 0, opacity: 0 },
                animate: { y: 0, opacity: 1, zIndex: 200 },
                exit: {
                  y: "150%",
                  opacity: [0.5, 0.4, 0],
                  zIndex: 0,
                  transition: { opacity: { duration: 0.2 } }
                },
                style: { position: "relative" },
                transition: { y: { damping: 300, duration: 0.3 } },
                children: [
                  isFirstStackItem && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
                    ToastViewportActionButton,
                    {
                      color: "inverse",
                      onClick: () => {
                        toastActions.toggleShowAllToasts(true);
                      },
                      children: [
                        toasts.length,
                        " Notifications"
                      ]
                    }
                  ) }),
                  isFirstListItem && /* @__PURE__ */ jsx(Fragment, { children: showAllToasts && /* @__PURE__ */ jsx(
                    ToastViewportActionButton,
                    {
                      onClick: () => {
                        toastActions.toggleShowAllToasts(false);
                      },
                      children: "Collapse"
                    }
                  ) }),
                  (isFirstListItem || isFirstStackItem) && /* @__PURE__ */ jsx(
                    ToastViewportActionButton,
                    {
                      hoverBackgroundColor: "danger",
                      onClick: () => {
                        toastActions.dismissToasts();
                      },
                      children: "Clear All"
                    }
                  )
                ]
              }
            ) })
          }
        ) })
      ]
    }
  ) });
};
var ToastAction = ({ altText, ...props }) => {
  return /* @__PURE__ */ jsx(ToastPrimitive.Action, { altText, asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "glass", color: "primary", ...props }) });
};
var ToastClose = ({ className, ...props }) => {
  return /* @__PURE__ */ jsx(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ...props }) });
};
var ToastTitle = classed(ToastPrimitive.Title, "font-medium text-content-intense text-sm");
var ToastDescriptionElement = classed(
  ToastPrimitive.Description,
  "font-body text-content-high mt-1 text-sm"
);
var ToastDescription = ({
  children,
  ...props
}) => {
  return children ? /* @__PURE__ */ jsxs(ToastDescriptionElement, { ...props, children: [
    " ",
    children
  ] }) : null;
};
var Container = ToastContainer;
var Viewport2 = ToastViewport;
var Title2 = ToastTitle;
var Description2 = ToastDescription;
var Close2 = ToastClose;
var Action2 = ToastAction;

// src/components/Flex/Flex.tsx
var flexGapVariants = {
  false: "gap-0",
  true: "gap-8",
  xs: "gap-2",
  sm: "gap-4",
  md: "gap-8",
  lg: "gap-16",
  xl: "gap-24"
};
var Flex = classed("div", "flex", {
  defaultVariants: {},
  variants: {
    row: {
      true: "flex-row",
      reverse: "flex-row-reverse"
    },
    column: {
      true: "flex-col",
      reverse: "flex-col-reverse"
    },
    dir: {
      row: "flex-row",
      column: "flex-col"
    },
    inlineFlex: {
      true: "inline-flex"
    },
    noFlex: {
      true: ""
    },
    flexNone: {
      true: "flex-none"
    },
    wrap: {
      true: "flex-wrap",
      reverse: "flex-wrap-reverse wrap"
    },
    grow: {
      true: "flex-grow"
    },
    shrink: {
      true: "flex-shrink"
    },
    auto: {
      true: "flex-auto"
    },
    basisAuto: {
      true: "basis-auto"
    },
    centerAlign: {
      true: "justify-center items-center"
    },
    gap: flexGapVariants,
    textAlign: {
      left: "text-left",
      center: "text-center",
      right: "text-right",
      end: "text-end",
      start: "text-start",
      justify: "text-justify"
    },
    justify: {
      start: "justify-start",
      end: "justify-end",
      center: "justify-center",
      between: "justify-between",
      around: "justify-around",
      evenly: "justify-evenly"
    },
    align: {
      start: "items-start",
      end: "items-end",
      center: "items-center",
      baseline: "items-baseline",
      stretch: "items-stretch"
    },
    alignSelf: {
      start: "self-start",
      center: "self-center",
      end: "self-end",
      stretch: "self-stretch",
      baseline: "self-baseline",
      auto: "self-auto"
    },
    justifySelf: {
      auto: "justify-self-auto",
      start: "justify-self-start",
      end: "justify-self-end",
      center: "justify-self-center",
      stretch: "justify-self-stretch"
    },
    fullWidth: {
      true: "w-full"
    }
  }
});

// src/utils/toArray.ts
function toArray(v, options) {
  const val = Array.isArray(v) ? v : [v];
  if (options?.notEmpty)
    return val.filter(notEmpty);
  return val;
}
var ToastIconElement = classed("span", "h-24 w-24 text-content-intense", {
  variants: {
    variant: {
      danger: "i-heroicons-x-circle",
      info: "i-heroicons-information-circle-solid",
      success: "i-heroicons-check-circle-solid",
      warning: "i-heroicons-exclaimation-triangle-solid"
    }
  }
});
var ToastIcon = ({ variant, className }) => {
  if (variant === "neutral" || !variant) {
    return null;
  }
  return /* @__PURE__ */ jsx$1(ToastIconElement, { variant, className });
};
var ToastActionButtons = ({
  action,
  className,
  justify
}) => {
  const actions = toArray(action, { notEmpty: true });
  return /* @__PURE__ */ jsx$1(Flex, { justify, className: "", grow: true, gap: "md", children: actions.length > 0 && actions.map((action2, i) => {
    function defaultProps() {
      const indexProps = {
        0: { variant: "glass" },
        1: { variant: "outlined" }
      };
      return indexProps[i];
    }
    return /* @__PURE__ */ jsx$1(
      Toast_exports.Action,
      {
        className: twMerge$1("grow shrink max-w-[115px]", className),
        size: "xs",
        ...defaultProps(),
        ...action2,
        color: "inverse"
      },
      i
    );
  }) });
};
var ToasterToast = motion((props) => {
  const {
    action,
    id,
    open: openProp,
    defaultOpen,
    title,
    description,
    closing,
    duration,
    onOpenChange,
    variant = "neutral",
    ...rest
  } = props;
  const isDarkMode = useIsDarkMode();
  function getColorScheme() {
    if (!isDarkMode && variant === "neutral")
      return "surface";
    if (variant === "neutral")
      return "neutral-dark";
    return variant;
  }
  return /* @__PURE__ */ jsxs$1(
    Toast_exports.Container,
    {
      open: true,
      defaultOpen,
      onOpenChange,
      "data-color-scheme": getColorScheme(),
      id,
      layout: true,
      ...rest,
      children: [
        closing && /* @__PURE__ */ jsx$1(
          motion.div,
          {
            className: "bg-content-ghost absolute left-0 top-0 h-6 w-full origin-right ",
            initial: { opacity: 0 },
            animate: { scaleX: 0, opacity: 100 },
            transition: { duration: (duration ?? NaN) / 1e3 }
          }
        ),
        /* @__PURE__ */ jsx$1(ToasterContent, { ...props })
      ]
    }
  );
});
var ToastContainer2 = ({
  variant,
  children,
  id,
  align,
  justify
}) => {
  return /* @__PURE__ */ jsxs$1(Flex, { gap: true, justify: "between", children: [
    /* @__PURE__ */ jsxs$1(Flex, { gap: true, align, justify, className: "w-full", children: [
      /* @__PURE__ */ jsx$1(ToastIcon, { variant }),
      children
    ] }),
    /* @__PURE__ */ jsx$1("div", { className: "-mr-4", children: /* @__PURE__ */ jsx$1(
      CloseButton,
      {
        animated: true,
        onClick: () => {
          toastActions.removeToast(id);
        }
      }
    ) })
  ] });
};
var ToasterContent = (props) => {
  const { title, description, action, variant, id } = props;
  const actions = toArray(action, { notEmpty: true });
  const containerProps = {
    variant,
    id
  };
  if (description && actions.length > 0) {
    return /* @__PURE__ */ jsx$1(ToastContainer2, { ...containerProps, children: /* @__PURE__ */ jsxs$1("div", { className: "flex w-full flex-col gap-8", children: [
      /* @__PURE__ */ jsxs$1("div", { children: [
        /* @__PURE__ */ jsx$1(Toast_exports.Title, { children: title }),
        /* @__PURE__ */ jsx$1(Toast_exports.Description, { children: description })
      ] }),
      /* @__PURE__ */ jsx$1(ToastActionButtons, { action })
    ] }) });
  }
  return /* @__PURE__ */ jsxs$1(ToastContainer2, { ...containerProps, align: "center", justify: "between", children: [
    /* @__PURE__ */ jsx$1(Toast_exports.Title, { className: "mr-8 shrink-0 ", children: title }),
    /* @__PURE__ */ jsx$1(ToastActionButtons, { justify: "end", action })
  ] });
};
var Toaster = () => {
  const { toasts, maxToasts, showAllToasts, isStacked } = useSnapshot(
    toastState
  );
  const toastsArr = useMemo(() => {
    const arr = isStacked ? [...toasts].reverse() : toasts;
    return showAllToasts ? arr : slice(arr, 0, maxToasts);
  }, [isStacked, maxToasts, showAllToasts, toasts]);
  return /* @__PURE__ */ jsxs$1(Fragment$1, { children: [
    /* @__PURE__ */ jsx$1(AnimatePresence, { mode: "popLayout", children: toastsArr.map(({ id, open, ...props }, index) => {
      return /* @__PURE__ */ jsx$1(ToasterToast, { forceMount: true, open, id, ...props, index }, id);
    }) }),
    /* @__PURE__ */ jsx$1(Toast_exports.Viewport, { layoutRoot: true })
  ] });
};

export { Toast_exports as Toast, ToastAction, Toaster, toast, toastActions, toastState };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map