@woobee/ui 0.2.0

package/dist/index.mjs

@@ -0,0 +1,3594 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React15, { forwardRef, useRef, useEffect, createContext, useState, useImperativeHandle, useContext, useReducer, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { CSSTransition } from 'react-transition-group';
+
+// src/utils/classNames.ts
+function classNames(classNameHash) {
+  return Object.entries(classNameHash).filter(([, value]) => !!value).map(([key]) => key).join(" ");
+}
+function classNameObject(classNameString) {
+  if (!classNameString) return {};
+  return classNameString.split(" ").reduce((prev, className) => {
+    if (className) {
+      prev[className] = true;
+    }
+    return prev;
+  }, {});
+}
+function Button({
+  children,
+  onClick,
+  placeholder = null,
+  variant = "primary",
+  size = "medium",
+  className = "",
+  type = "button",
+  loading = false,
+  disabled = false,
+  leftIcon = null,
+  rightIcon = null,
+  compact = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type,
+      onClick,
+      disabled: disabled || loading,
+      className: classNames({
+        "items-center justify-center rounded-lg focus:outline-none focus:ring-0 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed shadow-sm": true,
+        "relative": !!leftIcon || !!rightIcon,
+        "px-2.5 py-1.5 text-xs": size === "small",
+        "px-4 py-2 text-sm": size === "medium",
+        "px-5 py-3 text-base": size === "big",
+        "px-5 py-3 text-lg font-medium": size === "huge",
+        "!px-1 !py-0.5": compact,
+        "border bg-brown-500 dark:bg-primary-500 dark:hover:bg-primary-600 border-transparent text-white dark:text-black": variant === "primary",
+        "text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-300 dark:border-charcoal-700 hover:text-gray-500": variant === "secondary",
+        "!rounded-md text-left w-full text-gray-700 bg-white dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 border border-gray-200 dark:border-charcoal-700 hover:bg-gray-50 hover:text-gray-500": variant === "form-input",
+        "hover:text-brown-500 dark:text-charcoal-100 dark:hover:text-primary-500 !shadow-none": variant === "flat",
+        "!text-gray-300 hover:!text-gray-400 dark:!text-charcoal-400": !children,
+        ...classNameObject(className)
+      }),
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+        ] }) }),
+        !loading && leftIcon && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3", children: leftIcon }),
+        /* @__PURE__ */ jsx("span", { children: children || placeholder }),
+        !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: rightIcon })
+      ]
+    }
+  );
+}
+function Tag({
+  children,
+  className = "",
+  onRemove,
+  color,
+  style,
+  size = "medium"
+}) {
+  const customStyle = color ? { backgroundColor: color, ...style } : style;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: classNames({
+        "inline-flex items-center rounded font-medium whitespace-nowrap": true,
+        "bg-cream-200 dark:bg-charcoal-700 text-gray-800 dark:text-gray-200": !color,
+        "text-white": !!color,
+        // medium size
+        "text-sm": size === "medium",
+        "pl-2.5 pr-1 py-0.5 space-x-1": size === "medium" && !!onRemove,
+        "px-2 py-0.5": size === "medium" && !onRemove,
+        // small size
+        "text-xs": size === "small",
+        "pl-2 pr-0.5 py-0.5 space-x-0.5": size === "small" && !!onRemove,
+        "px-1.5 py-0.5": size === "small" && !onRemove,
+        ...classNameObject(className)
+      }),
+      style: customStyle,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        onRemove && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "flat",
+            compact: true,
+            size: size === "small" ? "small" : "medium",
+            className: "!text-red-500 hover:text-red-700 !px-0.5",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx("span", { children: "\xD7" })
+          }
+        )
+      ]
+    }
+  );
+}
+function TagGroup({
+  tags = [],
+  onRemove,
+  placeholder = "No tags selected",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        "flex flex-wrap h-11 gap-1.5 items-center": true,
+        ...classNameObject(className)
+      }),
+      children: tags.length > 0 ? tags.map((tag) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          color: tag.color,
+          onRemove: onRemove ? () => onRemove(tag) : void 0,
+          children: tag.name
+        },
+        tag.id || tag.name
+      )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-gray-300 dark:text-charcoal-400 text-sm flex items-center", children: placeholder })
+    }
+  );
+}
+function Tabs({
+  value,
+  onChange,
+  options = [
+    { id: "point", label: "Point" },
+    { id: "percentage", label: "Percentage" }
+  ],
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        "inline-flex rounded-lg bg-cream-50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm overflow-hidden text-xs p-1 space-x-0.5 rounded-xl": true,
+        ...classNameObject(className)
+      }),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: classNames({
+            "px-3 py-2 transition-colors rounded-lg": true,
+            "bg-white text-brown-500 dark:text-primary-500 dark:bg-charcoal-600": value === option.id,
+            "hover:text-brown-500 dark:text-charcoal-300 dark:hover:text-primary-500": value !== option.id
+          }),
+          onClick: () => onChange(option.id),
+          children: option.label
+        },
+        option.id
+      ))
+    }
+  );
+}
+var Toggle = forwardRef(
+  ({ listening, size, name, value, onChange, className }, ref) => {
+    const internalRef = useRef(null);
+    const spanRef = ref || internalRef;
+    useEffect(() => {
+      if (listening && spanRef && "current" in spanRef && spanRef.current && value !== null) {
+        spanRef.current.value = value;
+      }
+    }, [value, listening, spanRef]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: spanRef,
+        role: "checkbox",
+        "aria-checked": value,
+        tabIndex: 0,
+        onClick: () => onChange(!value),
+        className: classNames({
+          "relative inline-block flex-shrink-0 border-2 border-transparent rounded-full transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline": true,
+          "h-6 w-11": !size || size === "medium",
+          "h-4 w-7": size === "small",
+          "bg-brown-500 dark:bg-primary-500": value,
+          "bg-gray-200 dark:bg-charcoal-300": !value,
+          "cursor-pointer": !(className || "").includes("cursor-"),
+          ...classNameObject(className)
+        }),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: classNames({
+              "rounded-full bg-white shadow transform transition ease-in-out duration-200": true,
+              "inline-block h-5 w-5": !size || size === "medium",
+              "block h-3 w-3": size === "small",
+              "translate-x-5": value && (!size || size === "medium"),
+              "translate-x-0": !value,
+              "translate-x-3": value && size === "small"
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var Toggle_default = Toggle;
+function Loading({
+  title,
+  layout,
+  className = "",
+  spinClassName = "",
+  spinSizeClassName = "w-24 h-24"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "space-y-3": true,
+        "flex flex-col items-center justify-center fixed inset-0": layout === "fixed",
+        "w-full": layout === "fill",
+        [className]: true
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames({
+              [spinClassName]: true,
+              [spinSizeClassName]: true,
+              "relative border-8 border-gray-500 rounded-full animate-spin": true
+            }),
+            children: /* @__PURE__ */ jsx("div", { className: "absolute -left-4 -top-4 right-2/4 bottom-2/4 bg-white/50 bg-opacity-75 rounded-full rounded-b-none rounded-r-none" })
+          }
+        ),
+        !!title && title.length > 0 && /* @__PURE__ */ jsx("div", { children: title })
+      ]
+    }
+  );
+}
+function CheckboxList({
+  items = [],
+  selected = [],
+  onToggle,
+  itemKey = "id",
+  itemLabel = (item) => item.name || item.label || item.fullName,
+  isChecked,
+  loading = false,
+  placeholder = "No items found."
+}) {
+  const getFinalKey = (item, index) => {
+    const key = typeof itemKey === "function" ? itemKey(item) : item[itemKey];
+    return key !== void 0 && key !== null ? key : index;
+  };
+  const renderPlaceholder = () => {
+    if (typeof placeholder === "string") {
+      return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-charcoal-400", children: placeholder });
+    }
+    return placeholder;
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsx(Fragment, { children: items.length > 0 ? items.map((item, index) => {
+    const finalKey = getFinalKey(item, index);
+    const label = typeof itemLabel === "function" ? itemLabel(item) : item[itemLabel];
+    const checked = typeof isChecked === "function" ? isChecked(item, selected) : selected.some(
+      (s) => (s && typeof s === "object" ? s.id : s) === finalKey
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames({
+          "px-2 py-2 cursor-pointer flex items-center justify-between transition-colors": true,
+          "hover:bg-gray-50 dark:hover:bg-charcoal-700": !checked,
+          "bg-gray-50 dark:bg-primary-900/20": checked
+        }),
+        onClick: () => onToggle && onToggle(item),
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames({
+                "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
+                "border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-700": !checked,
+                "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 dark:text-black text-white": checked
+              }),
+              children: checked && /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames({
+                "text-sm": true,
+                "text-gray-900 dark:text-gray-100": !checked,
+                "dark:text-primary-400": checked
+              }),
+              children: label
+            }
+          )
+        ] })
+      },
+      finalKey
+    );
+  }) : renderPlaceholder() }) }) });
+}
+var ModalContext = createContext({
+  modalShowing: false,
+  drawerShowing: false,
+  setModalShowing: () => {
+  },
+  setDrawerShowing: () => {
+  }
+});
+function useModalContext() {
+  return useContext(ModalContext);
+}
+function ModalProvider({ children }) {
+  const [currentState, setCurrentState] = useState(0);
+  function reducer(state, action) {
+    const updatedValues = { ...state };
+    if ("modalShowing" in action) {
+      updatedValues.modalShowing = action.modalShowing;
+    }
+    if ("drawerShowing" in action) {
+      updatedValues.drawerShowing = action.drawerShowing;
+    }
+    if ("render" in action && !!action.render) {
+      setCurrentState(1 - currentState);
+    }
+    return updatedValues;
+  }
+  const [values, dispatch] = useReducer(reducer, {
+    modalShowing: false,
+    drawerShowing: false
+  });
+  const { modalShowing, drawerShowing } = values;
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const bodyEl = document.getElementsByTagName("BODY")[0];
+    if (!bodyEl) return;
+    if (modalShowing) {
+      bodyEl.classList.add("overflow-hidden");
+    } else {
+      bodyEl.classList.remove("overflow-hidden");
+    }
+  }, [modalShowing]);
+  return /* @__PURE__ */ jsx(
+    ModalContext.Provider,
+    {
+      value: {
+        modalShowing,
+        drawerShowing,
+        setModalShowing: (value) => dispatch({ modalShowing: value, render: modalShowing !== value }),
+        setDrawerShowing: (value) => dispatch({ drawerShowing: value, render: drawerShowing !== value })
+      },
+      children
+    }
+  );
+}
+var TransitionContext = createContext({
+  parent: {}
+});
+function useIsInitialRender() {
+  const isInitialRender = useRef(true);
+  useEffect(() => {
+    isInitialRender.current = false;
+  }, []);
+  return isInitialRender.current;
+}
+function CSSTransitionComponent({
+  show,
+  enter = "",
+  enterFrom = "",
+  enterTo = "",
+  leave = "",
+  leaveFrom = "",
+  leaveTo = "",
+  appear,
+  children,
+  onEnter = () => {
+  },
+  onEntering = () => {
+  },
+  onEntered = () => {
+  },
+  onExit = () => {
+  },
+  onExiting = () => {
+  },
+  onExited = () => {
+  }
+}) {
+  const enterClasses = enter.split(" ").filter((s) => s.length);
+  const enterFromClasses = enterFrom.split(" ").filter((s) => s.length);
+  const enterToClasses = enterTo.split(" ").filter((s) => s.length);
+  const leaveClasses = leave.split(" ").filter((s) => s.length);
+  const leaveFromClasses = leaveFrom.split(" ").filter((s) => s.length);
+  const leaveToClasses = leaveTo.split(" ").filter((s) => s.length);
+  const nodeRef = useRef(null);
+  function addClasses(node, classes) {
+    classes.length && node.classList.add(...classes);
+  }
+  function removeClasses(node, classes) {
+    classes.length && node.classList.remove(...classes);
+  }
+  return /* @__PURE__ */ jsx(
+    CSSTransition,
+    {
+      nodeRef,
+      appear,
+      unmountOnExit: true,
+      in: show,
+      addEndListener: (done) => {
+        if (!nodeRef.current) return done();
+        nodeRef.current.addEventListener("transitionend", done, false);
+      },
+      onEnter: () => {
+        if (!nodeRef.current) return;
+        addClasses(nodeRef.current, [...enterClasses, ...enterFromClasses]);
+        onEnter(nodeRef.current);
+      },
+      onEntering: () => {
+        if (!nodeRef.current) return;
+        removeClasses(nodeRef.current, enterFromClasses);
+        addClasses(nodeRef.current, enterToClasses);
+        onEntering(nodeRef.current);
+      },
+      onEntered: () => {
+        if (!nodeRef.current) return;
+        removeClasses(nodeRef.current, [...enterToClasses, ...enterClasses]);
+        onEntered(nodeRef.current);
+      },
+      onExit: () => {
+        if (!nodeRef.current) return;
+        addClasses(nodeRef.current, [...leaveClasses, ...leaveFromClasses]);
+        onExit(nodeRef.current);
+      },
+      onExiting: () => {
+        if (!nodeRef.current) return;
+        removeClasses(nodeRef.current, leaveFromClasses);
+        addClasses(nodeRef.current, leaveToClasses);
+        onExiting(nodeRef.current);
+      },
+      onExited: () => {
+        if (!nodeRef.current) return;
+        removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
+        onExited(nodeRef.current);
+      },
+      children: React15.cloneElement(children, {
+        ref: (node) => {
+          nodeRef.current = node;
+          const childRef = children.ref;
+          if (typeof childRef === "function") {
+            childRef(node);
+          } else if (childRef && typeof childRef === "object") {
+            childRef.current = node;
+          }
+        }
+      })
+    }
+  );
+}
+function Transition({ show, appear, ...rest }) {
+  const { parent } = useContext(TransitionContext);
+  const isInitialRender = useIsInitialRender();
+  const isChild = show === void 0;
+  if (isChild) {
+    return /* @__PURE__ */ jsx(
+      CSSTransitionComponent,
+      {
+        appear: parent.appear || !parent.isInitialRender,
+        show: parent.show,
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TransitionContext.Provider,
+    {
+      value: {
+        parent: {
+          show,
+          isInitialRender,
+          appear
+        }
+      },
+      children: /* @__PURE__ */ jsx(CSSTransitionComponent, { appear, show, ...rest })
+    }
+  );
+}
+function ModalFooter({
+  footer,
+  disabled,
+  onCancel,
+  onSubmit,
+  onChange,
+  closeText,
+  submitText,
+  submitColor,
+  changeText,
+  darkMode
+}) {
+  if (footer) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames({
+          "px-3 pt-5 pb-4 bg-gray-100 border-t border-gray-300 dark:border-charcoal-700 sm:px-6 sm:pt-3 sm:pb-3 dark:bg-black/40": true,
+          "!bg-charcoal-700 !border-t-charcoal-600": !!darkMode
+        }),
+        children: footer
+      }
+    );
+  }
+  const hasSubmit = typeof onSubmit === "function";
+  const hasCancel = typeof onCancel === "function";
+  const hasChange = typeof onChange === "function";
+  function handleSubmit(e) {
+    if (typeof onSubmit === "function" && !disabled) {
+      onSubmit(e);
+    }
+  }
+  let submitVariant = "primary";
+  let submitBtnClassName = "w-full";
+  if (submitColor) {
+    if (submitColor === "red") {
+      submitVariant = void 0;
+      submitBtnClassName = "w-full bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 border-transparent text-white";
+    } else if (submitColor === "primary") {
+      submitVariant = "primary";
+    } else {
+      submitVariant = void 0;
+      submitBtnClassName = classNames({ "w-full": true, [submitColor]: true });
+    }
+  }
+  return hasSubmit || hasCancel || hasChange ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between px-3 py-3 space-x-2 bg-transparent sm:px-6 sm:pt-3 sm:pb-3", children: [
+    hasChange && /* @__PURE__ */ jsx("div", { className: "flex space-x-2", children: /* @__PURE__ */ jsx("span", { className: "rounded-2xl", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onChange, children: changeText || "Change" }) }) }),
+    (hasSubmit || hasCancel) && /* @__PURE__ */ jsxs("div", { className: "flex justify-end flex-grow space-x-2", children: [
+      hasCancel && /* @__PURE__ */ jsx("span", { className: "flex shadow-sm rounded-2xl", children: /* @__PURE__ */ jsx(Button, { className: "w-full", variant: "secondary", onClick: onCancel, children: closeText || "Cancel" }) }),
+      hasSubmit && /* @__PURE__ */ jsx("span", { className: "flex w-full shadow-sm rounded-2xl sm:w-auto", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: submitBtnClassName,
+          variant: submitVariant,
+          disabled,
+          onClick: () => handleSubmit({}),
+          children: submitText || "Submit"
+        }
+      ) })
+    ] })
+  ] }) : null;
+}
+var MODAL_OPEN_COUNT = 0;
+function Modal({
+  wrapperClassName,
+  open,
+  size,
+  title,
+  description,
+  transparent,
+  header,
+  sidebar,
+  footer,
+  children,
+  disabled,
+  onClose,
+  onExited = () => {
+  },
+  onCancel,
+  onSubmit,
+  onChange,
+  closeText,
+  submitText,
+  submitColor,
+  changeText,
+  fullscreen,
+  opts
+}) {
+  const { setModalShowing } = useContext(ModalContext);
+  const { darkMode, sidebarPosition = "right", mobileSidebarPosition = "bottom" } = opts || {};
+  const isMobileSidebarTop = mobileSidebarPosition === "top" || mobileSidebarPosition === "above";
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const bodyEl = document.getElementsByTagName("BODY")[0];
+    if (open) {
+      setModalShowing(true);
+      if (MODAL_OPEN_COUNT === 0) {
+        bodyEl?.classList?.add("overflow-hidden");
+      }
+      MODAL_OPEN_COUNT++;
+    } else {
+      setModalShowing(false);
+    }
+    return () => {
+      if (open) {
+        MODAL_OPEN_COUNT--;
+        if (MODAL_OPEN_COUNT === 0) {
+          bodyEl?.classList?.remove("overflow-hidden");
+        }
+      }
+    };
+  }, [open]);
+  function handleClose() {
+    if (typeof onClose === "function") {
+      onClose();
+    }
+    setModalShowing(false);
+  }
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 lg:px-6 lg:inset-0 lg:flex lg:items-center lg:justify-center", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames({
+          "max-h-[100dvh] overflow-y-auto sm:w-full": true,
+          "lg:max-w-2xl": !size,
+          "lg:max-w-md": size === "small",
+          "lg:max-w-3xl": size === "medium",
+          "lg:max-w-6xl": size === "large",
+          "h-[100dvh] lg:h-auto lg:max-w-3xl": size === "full"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            Transition,
+            {
+              enter: "ease-out duration-300",
+              enterFrom: "opacity-0",
+              enterTo: "opacity-100",
+              leave: "ease-in duration-200",
+              leaveFrom: "opacity-100",
+              leaveTo: "opacity-0",
+              children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 transition-opacity", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gray-500 dark:bg-charcoal-800 opacity-75" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Transition,
+            {
+              enter: "ease-out duration-300",
+              enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+              enterTo: "opacity-100 translate-y-0 sm:scale-100",
+              leave: "ease-in duration-200",
+              leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+              leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: classNames({
+                    "relative flex flex-col z-40 max-h-[100dvh] sm:max-h-9/10 sm:rounded-xl overflow-hidden transform transition-all sm:w-full": true,
+                    "sm:max-w-2xl": !size,
+                    "sm:max-w-md": size === "small",
+                    "sm:max-w-4xl": size === "medium",
+                    "sm:max-w-6xl": size === "large",
+                    "sm:max-w-full sm:!max-h-full": size === "full",
+                    "shadow-xl": !transparent,
+                    "bg-white dark:bg-black": !transparent && !wrapperClassName,
+                    "bg-transparent ": !!transparent && !wrapperClassName,
+                    ...classNameObject(wrapperClassName)
+                  }),
+                  role: "dialog",
+                  "aria-modal": "true",
+                  "aria-labelledby": "modal-headline",
+                  children: [
+                    !header && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: classNames({
+                          "flex items-center justify-between px-3 pt-3 pb-2 space-x-2 sm:px-6 sm:pt-6 sm:pb-3": true,
+                          "sm:border-b sm:border-gray-200 dark:sm:border-charcoal-700 sm:shadow-sm": !!sidebar
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                            /* @__PURE__ */ jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-gray-900 dark:text-white", children: title }),
+                            !!description && description.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-700", children: description })
+                          ] }),
+                          /* @__PURE__ */ jsx(Button, { variant: "flat", compact: true, onClick: handleClose, children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) })
+                        ]
+                      }
+                    ),
+                    !!header && /* @__PURE__ */ jsx(Fragment, { children: header }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classNames({
+                          "pb-3 max-h-full overflow-y-auto": true,
+                          "h-[100dvh] lg:h-auto": fullscreen || size === "full",
+                          "sm:pt-4 sm:relative border-b border-gray-200 dark:border-charcoal-700": !!sidebar,
+                          "sm:pr-80": !!sidebar && sidebarPosition === "right",
+                          "sm:pl-80": !!sidebar && sidebarPosition === "left"
+                        }),
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex-grow px-3 sm:px-6", children: [
+                          !!sidebar && isMobileSidebarTop && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: classNames({
+                                "sm:absolute sm:top-0 sm:bottom-0 sm:w-80 sm:max-h-full sm:overflow-y-scroll sm:px-5 sm:py-4": true,
+                                "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
+                                "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
+                                "pb-6 mb-6 border-b border-gray-200 dark:border-charcoal-700 sm:border-b-0 sm:pb-0 sm:mb-0": true
+                              }),
+                              children: sidebar
+                            }
+                          ),
+                          children,
+                          !!sidebar && !isMobileSidebarTop && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: classNames({
+                                "sm:absolute sm:top-0 sm:bottom-0 sm:w-80 sm:max-h-full sm:overflow-y-scroll sm:px-5 sm:py-4": true,
+                                "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
+                                "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
+                                "pt-6 mt-6 border-t border-gray-200 dark:border-charcoal-700 sm:border-t-0 sm:mt-0": true
+                              }),
+                              children: sidebar
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ModalFooter,
+                      {
+                        footer,
+                        disabled,
+                        onCancel,
+                        onSubmit,
+                        onChange,
+                        closeText,
+                        submitText,
+                        submitColor,
+                        changeText,
+                        darkMode
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }) }),
+    document.body
+  );
+}
+function ConfirmationBox({
+  open,
+  title = "Confirm Action",
+  description = "Are you sure you want to perform this action?",
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  confirmColor,
+  type = "danger",
+  disabled = false,
+  onClose,
+  onConfirm
+}) {
+  let iconContainerClass = "";
+  let iconSvg = null;
+  let defaultConfirmColor = "primary";
+  if (type === "danger") {
+    iconContainerClass = "bg-red-50 dark:bg-red-950/30 text-red-600 dark:text-red-400";
+    defaultConfirmColor = "red";
+    iconSvg = /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) });
+  } else if (type === "warning") {
+    iconContainerClass = "bg-yellow-50 dark:bg-yellow-950/30 text-yellow-600 dark:text-yellow-400";
+    defaultConfirmColor = "primary";
+    iconSvg = /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) });
+  } else {
+    iconContainerClass = "bg-blue-50 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400";
+    defaultConfirmColor = "primary";
+    iconSvg = /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+  }
+  const resolvedConfirmColor = confirmColor || defaultConfirmColor;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      size: "small",
+      title,
+      onClose,
+      onCancel: onClose,
+      onSubmit: onConfirm,
+      closeText: cancelText,
+      submitText: confirmText,
+      submitColor: resolvedConfirmColor,
+      disabled,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-4", children: [
+        iconSvg && /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconContainerClass}`, children: iconSvg }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 font-medium", children: description }) })
+      ] })
+    }
+  );
+}
+function Drawer({
+  theme,
+  open,
+  onClose,
+  title,
+  level,
+  description,
+  children,
+  footer,
+  animation = {},
+  wrapperClassName,
+  sectionClassName = ""
+}) {
+  const { setDrawerShowing } = useContext(ModalContext);
+  useEffect(() => {
+    setDrawerShowing(open);
+  }, [open]);
+  function handleClose() {
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    Transition,
+    {
+      show: open,
+      enter: "transform transition ease-in-out duration-500 sm:duration-700",
+      enterFrom: "translate-x-full",
+      enterTo: "translate-x-0",
+      leave: "transform transition ease-in-out duration-500 sm:duration-700",
+      leaveFrom: "translate-x-0",
+      leaveTo: "translate-x-full",
+      ...animation,
+      children: /* @__PURE__ */ jsx(
+        "section",
+        {
+          className: classNames({
+            "fixed inset-y-0 max-w-full right-0 flex": true,
+            "z-20": !level || level === "base" || level === "extra-wide" || level === "full",
+            "z-30": level === "middle",
+            "z-40": level === "top",
+            "z-50": level === "ceil",
+            [sectionClassName]: true
+          }),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames({
+                "w-screen": true,
+                "sm:max-w-7xl": level === "extra-wide",
+                "sm:max-w-full": level === "full",
+                "sm:max-w-4xl": !level || level === "base",
+                "sm:max-w-2xl": level === "middle",
+                "sm:max-w-md": level === "top",
+                "sm:max-w-sm": level === "ceil"
+              }),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames({
+                    "h-full flex flex-col shadow-xl": true,
+                    "bg-white dark:bg-primary-800": !wrapperClassName,
+                    ...classNameObject(wrapperClassName)
+                  }),
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+                    /* @__PURE__ */ jsxs(
+                      "header",
+                      {
+                        className: classNames({
+                          "h-auto py-2.5 sm:py-3 px-4 sm:px-6": true,
+                          "bg-primary-100 dark:bg-primary-900": !theme && (!level || level === "base" || level === "extra-wide" || level === "full"),
+                          "bg-primary-200 dark:bg-primary-900": !theme && level === "middle",
+                          "bg-primary-300 dark:bg-primary-900": !theme && level === "top",
+                          "bg-primary-50 dark:bg-primary-900 border-b border-primary-100": !theme && level === "ceil",
+                          "bg-white": theme === "WHITE",
+                          "bg-black": theme === "BLACK",
+                          "bg-red-500": theme === "RED",
+                          "bg-orange-500": theme === "ORANGE",
+                          "bg-yellow-500": theme === "YELLOW",
+                          "bg-lime-500": theme === "LIME",
+                          "bg-green-500": theme === "GREEN",
+                          "bg-brown-500": theme === "BROWN",
+                          "bg-blue-500": theme === "BLUE",
+                          "bg-dark-blue-500": theme === "DARK_BLUE",
+                          "bg-purple-500": theme === "PURPLE",
+                          "bg-flamingo-500": theme === "FLAMINGO",
+                          "bg-pink-500": theme === "PINK"
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-3", children: [
+                            /* @__PURE__ */ jsx("h2", { className: "text-base sm:text-lg leading-7 font-medium", children: title }),
+                            /* @__PURE__ */ jsx("div", { className: "h-7 flex items-center", children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                "aria-label": "Close",
+                                className: "-mr-3 text-primary-700 dark:text-white hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
+                                onClick: handleClose,
+                                children: /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
+                              }
+                            ) })
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-primary-300", children: description }) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "py-3 flex-1 flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6", children }) }),
+                    !!footer && /* @__PURE__ */ jsx("div", { className: "sm:border-t sm:border-cool-gray-200 sm:dark:border-gray-700 py-2.5 sm:py-4 px-4 sm:px-6", children: footer })
+                  ] })
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function SortIcon({ direction }) {
+  if (direction === "DESC") {
+    return /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4" }) }) });
+  }
+  if (direction === "ASC") {
+    return /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" }) }) });
+  }
+  return null;
+}
+function InlinePrompt({
+  title,
+  onConfirm,
+  className = "",
+  withText,
+  confirmText,
+  cancelText,
+  opts
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const nodeTarget = useRef(null);
+  const nodeWindow = useRef(null);
+  const { condensed, blocked } = opts || {};
+  function handleClickOutside(e) {
+    if (nodeTarget.current?.contains(e.target) || nodeWindow.current?.contains(e.target)) {
+      return;
+    }
+    setIsOpen(false);
+  }
+  function handleOpenConfirmation() {
+    if (!blocked) {
+      setIsOpen(true);
+    }
+  }
+  function handleCloseConfirmation() {
+    setIsOpen(false);
+  }
+  function handleConfirm() {
+    onConfirm();
+    setIsOpen(false);
+  }
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx("div", { className: "inline-block text-left", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md w-full relative", children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref: nodeTarget,
+        onClick: handleOpenConfirmation,
+        className: classNames({
+          "inline-flex justify-center w-full rounded-md bg-transparent font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 transition ease-in-out duration-150 cursor-pointer": true,
+          "leading-5 px-4 py-2": !condensed,
+          "text-gray-700 hover:text-gray-500 active:text-gray-800 text-md": !className.includes("text-"),
+          ...classNameObject(className)
+        }),
+        "aria-haspopup": "true",
+        "aria-expanded": "true",
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Transition,
+      {
+        show: isOpen,
+        enter: "transition ease-out duration-100",
+        enterFrom: "opacity-0 scale-95",
+        enterTo: "opacity-100 scale-100",
+        leave: "transition ease-in duration-75",
+        leaveFrom: "opacity-100 scale-100",
+        leaveTo: "opacity-0 scale-95",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: nodeWindow,
+            className: "absolute top-0 left-0 min-w-full border border-gray-200 rounded-md bg-gray-50 flex justify-center z-20",
+            children: [
+              /* @__PURE__ */ jsxs("a", { onClick: handleConfirm, className: "inline-flex items-center cursor-pointer m-1 text-sm text-green-500", children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-green-500 w-6 h-6", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+                    clipRule: "evenodd"
+                  }
+                ) }),
+                withText && confirmText
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  className: "inline-flex items-center cursor-pointer m-1 text-sm text-red-500",
+                  onClick: handleCloseConfirmation,
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-red-500 w-6 h-6", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+                        clipRule: "evenodd"
+                      }
+                    ) }),
+                    withText && cancelText
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function H1({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: classNames({
+        "text-lg sm:text-xl font-title text-primary-500 font-semibold": true,
+        ...classNameObject(className)
+      }),
+      children
+    }
+  );
+}
+function H2({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: classNames({
+        "text-2xl font-semibold": true,
+        ...classNameObject(className)
+      }),
+      children
+    }
+  );
+}
+function H3({ id, className, children }) {
+  if (id) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { id, className: "-mt-24" }),
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          className: classNames({
+            "pt-20 mb-0 text-lg font-semibold": true,
+            ...classNameObject(className)
+          }),
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: classNames({
+        "text-lg mb-0 font-semibold": true,
+        ...classNameObject(className)
+      }),
+      children
+    }
+  );
+}
+function H4({ id, className, children }) {
+  if (id) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { id, className: "-mt-24" }),
+      /* @__PURE__ */ jsx(
+        "h4",
+        {
+          className: classNames({
+            "pt-20 mb-0 text-base font-semibold": true,
+            ...classNameObject(className)
+          }),
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "h4",
+    {
+      className: classNames({
+        "text-base mb-0 font-semibold": true,
+        ...classNameObject(className)
+      }),
+      children
+    }
+  );
+}
+function B({ children }) {
+  return /* @__PURE__ */ jsx("b", { className: "font-semibold", children });
+}
+function Table({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        ...classNameObject(className),
+        "flex flex-col relative": true,
+        "sm:px-0 lg:px-8": !className || !className.includes("px-")
+      }),
+      children: /* @__PURE__ */ jsx("div", { className: "-my-2 py-2 px-0.5 sm:px-0 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8", children: /* @__PURE__ */ jsx("div", { className: "align-middle inline-block min-w-full shadow overflow-hidden rounded-lg border-b border-t border-gray-200", children: /* @__PURE__ */ jsx("table", { className: "min-w-full", children }) }) })
+    }
+  );
+}
+function Thead({ children }) {
+  return /* @__PURE__ */ jsx("thead", { children });
+}
+function Tr({ children }) {
+  return /* @__PURE__ */ jsx("tr", { children });
+}
+function Th({ condensed, className, children, sticky, ...opts }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: classNames({
+        ...classNameObject(className),
+        "sticky z-10 top-0": !!sticky,
+        "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider": true,
+        "px-6": !condensed,
+        "py-4": !condensed && (!className || !className.includes("py-")),
+        "px-2.5": !!condensed,
+        "py-2": !!condensed && (!className || !className.includes("py-"))
+      }),
+      ...opts,
+      children
+    }
+  );
+}
+function Tbody({ children }) {
+  return /* @__PURE__ */ jsx("tbody", { className: "bg-white", children });
+}
+function Td({ className, align, colSpan, condensed, narrow, children }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      align,
+      colSpan,
+      className: classNames({
+        ...classNameObject(className),
+        "whitespace-no-wrap border-b border-gray-200": true,
+        "px-6": !condensed && !narrow,
+        "py-4": !condensed && !narrow && (!className || !className.includes("py-")),
+        "px-2": !!condensed,
+        "py-2": !!condensed && (!className || !className.includes("py-")),
+        "px-0": !!narrow,
+        "py-0": !!narrow && (!className || !className.includes("py-"))
+      }),
+      children
+    }
+  );
+}
+var Input = forwardRef((props, ref) => {
+  const {
+    id,
+    theme,
+    className,
+    label,
+    placeholder,
+    active,
+    pattern,
+    maxLength,
+    inputMode,
+    prefix,
+    type = "text",
+    info,
+    defaultValue,
+    checked,
+    min,
+    max,
+    error = false,
+    errorMessage,
+    readOnly = false,
+    name,
+    autoComplete = "off",
+    autoFocus,
+    spellCheck,
+    noBorder,
+    listening,
+    onChange,
+    onFocus,
+    onBlur,
+    onClick,
+    onKeyUp,
+    onKeyDown,
+    hideIndicator,
+    darkMode
+  } = props;
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  const hasPrefix = !!prefix && prefix.length > 0;
+  useImperativeHandle(ref, () => inputRef.current);
+  useEffect(() => {
+    if (listening && inputRef.current && defaultValue !== null && defaultValue !== void 0) {
+      if (hasPrefix) {
+        inputRef.current.value = prefix + String(defaultValue);
+      } else {
+        inputRef.current.value = String(defaultValue);
+      }
+    }
+  }, [defaultValue]);
+  function handleChange(e) {
+    const value = e.target.value;
+    if (hasPrefix && inputRef.current) {
+      const plainValue = hasPrefix ? value.length < prefix.length ? value.length === 1 ? value : "" : value.replace(prefix, "") : value;
+      inputRef.current.value = prefix + plainValue;
+      if (typeof onChange === "function") {
+        if (type === "checkbox") {
+          onChange(e.target.checked);
+        } else {
+          onChange(plainValue);
+        }
+      }
+    } else {
+      if (typeof onChange === "function") {
+        if (type === "checkbox") {
+          onChange(e.target.checked);
+        } else {
+          onChange(value);
+        }
+      }
+    }
+  }
+  function handleFocus(e) {
+    if (type === "search") {
+      setFocused(true);
+    }
+    if (typeof onFocus === "function") {
+      onFocus(e);
+    }
+  }
+  function handleBlur(e) {
+    if (type === "search") {
+      setFocused(false);
+    }
+    if (typeof onBlur === "function") {
+      onBlur(e);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          className: classNames({
+            ...classNameObject(className),
+            "px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 text-black dark:text-charcoal-100 dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
+            "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
+            "h-11": !className || !className.includes("h-"),
+            "text-sm": type !== "tel",
+            "text-lg": type === "tel",
+            "rounded-lg": type !== "radio",
+            "rounded-full": type === "radio",
+            "border border-gray-200 dark:border-charcoal-700 shadow-sm text-black": !noBorder && !readOnly && type !== "radio",
+            "border border-opacity-20 bg-gray-100 cursor-not-allowed": readOnly,
+            "border-transparent": !!noBorder,
+            "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error,
+            "focus:ring-primary-500": !error && type !== "radio",
+            "focus:ring-transparent": type === "radio",
+            "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
+            "sm:leading-normal": !className || !className.includes("leading-"),
+            "cursor-pointer": type === "checkbox" || type === "button",
+            "text-black h-4 w-4": type === "radio",
+            "pr-10": type === "search"
+          }),
+          ...type === "button" ? { value: label } : {},
+          inputMode,
+          pattern,
+          name,
+          min,
+          max,
+          ref: inputRef,
+          type,
+          maxLength,
+          defaultValue,
+          placeholder,
+          readOnly,
+          autoComplete,
+          autoFocus,
+          spellCheck,
+          onClick,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onKeyUp,
+          onKeyDown
+        }
+      ),
+      error && !hideIndicator && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames({
+            "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none": true,
+            "!text-white focus:!text-primary-500": !!darkMode
+          }),
+          children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-red-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+              clipRule: "evenodd"
+            }
+          ) })
+        }
+      ),
+      type === "search" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames({
+            "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none focus:outline-none active:outline-none": true,
+            "!text-white": !!darkMode,
+            "text-gray-600": !focused,
+            "!text-primary-500": focused
+          }),
+          children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z",
+              clipRule: "evenodd"
+            }
+          ) })
+        }
+      )
+    ] }),
+    error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+  ] });
+});
+Input.displayName = "Input";
+var Input_default = Input;
+function Label({
+  className,
+  error = false,
+  htmlFor,
+  info,
+  mandatory,
+  opts,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor,
+        className: classNames({
+          "block text-sm font-medium mb-1.5 text-black dark:text-white": true,
+          "text-black dark:text-white/80": !error,
+          "text-red-600": error,
+          ...classNameObject(className)
+        }),
+        children: [
+          children,
+          mandatory && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    info && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: classNames({
+          "text-sm leading-5 text-black mb-1.5": true,
+          "text-red-600": error
+        }),
+        children: info
+      }
+    )
+  ] });
+}
+var Select = forwardRef((props, ref) => {
+  const {
+    id,
+    loading = false,
+    className,
+    onChange,
+    error = false,
+    errorMessage,
+    info,
+    readOnly = false,
+    name,
+    children,
+    value
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !loading && /* @__PURE__ */ jsx("div", { className: "rounded-md shadow-sm border border-gray-200", children: /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        value,
+        className: classNames({
+          ...classNameObject(className),
+          ...classNameObject(
+            `form-select block w-full transition duration-150 ease-in-out ${error ? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red" : ""}`
+          )
+        }),
+        ref,
+        name,
+        disabled: readOnly,
+        onChange,
+        children
+      }
+    ) }),
+    loading && /* @__PURE__ */ jsx("span", { className: "inline-flex relative w-6 loading" }),
+    error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+  ] });
+});
+Select.displayName = "Select";
+var Select_default = Select;
+var SelectInput = forwardRef((props, ref) => {
+  const {
+    className,
+    placeholder = "Select an option",
+    items = [],
+    selectedValue = "",
+    readOnly = false,
+    error = false,
+    onChange = () => {
+    }
+  } = props;
+  function handleOnChange(event) {
+    const value = event.target.value;
+    if (typeof onChange === "function") {
+      onChange(value);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      onChange: handleOnChange,
+      value: selectedValue || "",
+      disabled: readOnly,
+      className: classNames({
+        "form-select block w-full transition duration-150 ease-in-out border border-gray-200 rounded-md shadow-sm text-sm px-3 h-11 text-black": true,
+        "cursor-not-allowed border bg-gray-100": readOnly,
+        "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error
+      }),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: placeholder }, ""),
+        items.map((item, index) => /* @__PURE__ */ jsx("option", { value: item.id, children: item.name }, index))
+      ]
+    }
+  );
+});
+SelectInput.displayName = "SelectInput";
+var SelectInput_default = SelectInput;
+var Textarea = forwardRef((props, ref) => {
+  const {
+    id,
+    className,
+    onChange,
+    onFocus,
+    onMouseDown,
+    placeholder,
+    error = false,
+    errorMessage,
+    info,
+    readOnly = false,
+    name,
+    defaultValue,
+    rows,
+    opts,
+    autoFocus
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative rounded-xl shadow-sm", "data-plate-focus": opts?.plateFocus, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          "data-plate-focus": opts?.plateFocus,
+          autoFocus,
+          id,
+          rows,
+          placeholder,
+          className: classNames({
+            ...classNameObject(className),
+            "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 text-black dark:text-charcoal-100 dark:bg-charcoal-800 rounded-lg": true,
+            "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
+            "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
+            "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
+          }),
+          name,
+          ref,
+          defaultValue,
+          onFocus,
+          onMouseDown,
+          onChange,
+          readOnly
+        }
+      ),
+      error && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-0 pr-3 flex pointer-events-none", children: /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 text-red-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      ) }) })
+    ] }),
+    error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var Textarea_default = Textarea;
+function TagInput({
+  name,
+  defaultValue,
+  onChange,
+  placeholder
+}) {
+  const [currentState, setCurrentState] = useState(0);
+  const tagInputRef = useRef(null);
+  function reducer(state, action) {
+    const updatedValues = { ...state };
+    if ("tags" in action) {
+      updatedValues.tags = Array.from(new Set(action.tags));
+    }
+    if ("reset" in action && action.reset) {
+      updatedValues.tags = [];
+    }
+    if ("render" in action && action.render) {
+      setCurrentState(1 - currentState);
+    }
+    return updatedValues;
+  }
+  const [values, dispatch] = useReducer(reducer, {
+    tags: []
+  });
+  const { tags } = values;
+  useEffect(() => {
+    if (defaultValue) {
+      dispatch({ tags: defaultValue, render: true });
+    } else {
+      dispatch({ reset: true, render: true });
+    }
+  }, [defaultValue]);
+  function handleAddTag(event) {
+    if (event.key === "Enter") {
+      const value = event.target.value;
+      if (!value) return false;
+      const newTags = Array.from(/* @__PURE__ */ new Set([...tags, value]));
+      dispatch({ tags: newTags, render: true });
+      if (typeof onChange === "function") {
+        onChange(newTags);
+      }
+      if (tagInputRef.current) {
+        tagInputRef.current.value = "";
+      }
+    }
+  }
+  function handleRemoveTag(tag) {
+    if (!tag) return false;
+    const newTags = tags.filter((i) => i !== tag);
+    dispatch({ tags: newTags, render: true });
+    if (typeof onChange === "function") {
+      onChange(newTags);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full flex-wrap px-2 pt-2 pb-1 border border-gray-300 rounded-md", children: [
+    tags.map((tag, index) => /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "inline-flex bg-primary-200 text-primary-800 text-sm rounded-full h-6 px-3 justify-center items-center mr-1 mb-1",
+        children: [
+          tag,
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4 ml-1 cursor-pointer",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              xmlns: "http://www.w3.org/2000/svg",
+              onClick: () => handleRemoveTag(tag),
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        ]
+      },
+      index
+    )),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: tagInputRef,
+        className: "ml-2 text-sm focus:border-transparent focus:outline-none mb-1",
+        placeholder: tags && tags.length > 0 ? "" : placeholder,
+        onKeyDown: handleAddTag
+      }
+    )
+  ] });
+}
+function NoData({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center text-center my-8 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: "/img/no-data.png",
+        width: 420,
+        height: 307,
+        className: "max-w-[90%]",
+        alt: "no data found"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-gray-900 mt-3 dark:text-white/50", children: "It's empty." }),
+      /* @__PURE__ */ jsx("p", { className: "text-4 text-gray-700 dark:text-white/60", children: "Nothing to do for now." })
+    ] })
+  ] });
+}
+var ThemeContext = createContext(void 0);
+function ThemeProvider({ children, defaultTheme = "system" }) {
+  const [mode, setMode] = useState(defaultTheme);
+  const [isDark, setIsDark] = useState(false);
+  const stateRef = useRef(mode);
+  useEffect(() => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const isDark2 = mode === "dark" || mode === "system" && prefersDark;
+    document.documentElement.classList.toggle("dark", isDark2);
+    stateRef.current = mode;
+    setIsDark(isDark2);
+  }, [mode]);
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") || defaultTheme;
+    setMode(saved);
+  }, [defaultTheme]);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = () => {
+      const prevMode = stateRef.current;
+      if (prevMode !== "system") {
+        setTimeout(() => {
+          document.documentElement.classList.toggle("dark", prevMode === "dark");
+        }, 100);
+      }
+    };
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, []);
+  function handleToggleTheme(triggerMode) {
+    const triggeredMode = triggerMode === mode ? "system" : triggerMode;
+    setMode(triggeredMode);
+    if (!triggeredMode || triggeredMode === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", triggeredMode);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme: mode,
+        darkMode: isDark,
+        handleToggleTheme
+      },
+      children
+    }
+  );
+}
+function useThemeContext() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeContext must be used within a ThemeProvider");
+  }
+  return context;
+}
+function ThemeToggle() {
+  const { theme, handleToggleTheme } = useThemeContext();
+  return /* @__PURE__ */ jsxs("div", { className: "text-charcoal-700 dark:text-white z-30 flex space-x-1.5 items-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames({
+          "opacity-20 cursor-pointer": true,
+          "!opacity-100": theme === "light"
+        }),
+        onClick: () => handleToggleTheme("light"),
+        children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames({
+          "opacity-20 cursor-pointer": true,
+          "!opacity-100": theme === "dark"
+        }),
+        onClick: () => handleToggleTheme("dark"),
+        children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" }) })
+      }
+    )
+  ] });
+}
+
+// src/utils/debounce.ts
+function debounce(fn, delay) {
+  let timeoutId;
+  return function(...args) {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+// src/hooks/useDebounce.ts
+function useDebounce(callback, delay, deps = []) {
+  const callbackFn = useCallback(debounce(callback, delay), deps);
+  return [callbackFn];
+}
+
+// src/hooks/useResizeListener.ts
+function useResizeListener(props = {}) {
+  const [values, setValues] = useState(
+    [
+      typeof window === "undefined" ? props.mobileAgent ? 375 : 1080 : window.innerWidth,
+      typeof window === "undefined" ? props.mobileAgent ? 812 : 750 : window.innerHeight,
+      typeof window === "undefined" ? null : window.innerWidth < 576 ? "mobile" : "desktop",
+      typeof window === "undefined" ? null : window.innerWidth < 576 ? "portrait-view" : "landscape-view",
+      typeof window === "undefined" ? props.mobileAgent || null : window.innerWidth < 576 ? true : false,
+      typeof window === "undefined" ? props.mobileAgent || null : window.innerWidth >= 576 && window.innerWidth < 992 ? true : false
+    ]
+  );
+  const [screenWidth, screenHeight, viewport, viewMode, mobileView, tabletView] = values || [];
+  function handleChangeViewport() {
+    setValues([
+      window.innerWidth,
+      window.innerHeight,
+      window.innerWidth < 576 ? "mobile" : "desktop",
+      window.innerWidth < 576 ? "portrait-view" : "landscape-view",
+      window.innerWidth < 576 ? true : false,
+      window.innerWidth >= 576 && window.innerWidth < 992 ? true : false
+    ]);
+  }
+  const [debouncedSetValue] = useDebounce(handleChangeViewport, 300);
+  useEffect(() => {
+    window.addEventListener("resize", debouncedSetValue);
+    return () => {
+      window.removeEventListener("resize", debouncedSetValue);
+    };
+  }, [debouncedSetValue]);
+  return { screenWidth, screenHeight, viewport, viewMode, mobileView, tabletView };
+}
+var PopoverContext = createContext(void 0);
+function PopoverCard({
+  show,
+  style,
+  tooltipStyle,
+  position,
+  description,
+  actions,
+  onClose
+}) {
+  function handleMenuClick(action) {
+    if (typeof action === "function") {
+      action();
+    }
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  }
+  function handleCloseMenu() {
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  }
+  const stickyTop = position === "top";
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames({
+            "hidden sm:block fixed text-sm z-[9999] w-52 max-h-64 overflow-y-auto border border-gray-100 bg-white dark:bg-charcoal-800 dark:border-charcoal-700 shadow-md rounded-md pt-3 pb-2": true,
+            "pointer-events-none opacity-0": !show,
+            "opacity-100": show
+          }),
+          style: style || void 0,
+          children: [
+            !!description && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
+            actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 w-full", children: actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+              actionIndex > 0 && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
+              action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-gray-500 dark:text-white dark:hover", children: action.section }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames({
+                    "mt-1": !!action.section
+                  }),
+                  children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "text-sm sm:text-base px-3 py-1.5 text-charcoal-700 dark:text-charcoal-300 hover:text-gray-900 hover:bg-gray-200 hover:dark:text-charcoal-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
+                      onClick: () => handleMenuClick(item.action || item.onClick),
+                      children: item.label
+                    },
+                    item.id
+                  ))
+                }
+              )
+            ] }, action.id)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames({
+            "hidden sm:block fixed z-[9999] rotate-45 w-4 h-4 overflow-y-auto border-gray-100 bg-white dark:bg-charcoal-700 dark:border-charcoal-800": true,
+            "border-t border-l": !stickyTop,
+            "border-b border-r": stickyTop,
+            "pointer-events-none opacity-0": !show,
+            "opacity-100": show
+          }),
+          style: tooltipStyle || void 0
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: classNames({
+        "block sm:hidden fixed inset-0 z-[9999] pointer-events-none": true
+      }), children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames({
+              "absolute inset-0 bg-black/50 transition-opacity duration-300": true,
+              "opacity-0": !show,
+              "opacity-100 pointer-events-auto": show
+            }),
+            onClick: handleCloseMenu
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames({
+              "absolute bottom-0 left-0 right-0 bg-white dark:bg-charcoal-800 overflow-hidden transition-transform duration-300 transform": true,
+              "translate-y-full": !show,
+              "translate-y-0 pointer-events-auto": show
+            }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Menu" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onClick: handleCloseMenu,
+                    className: "p-1 -mr-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
+                    children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "px-4 pb-6 max-h-[70vh] overflow-y-auto", children: [
+                !!description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-gray-500 dark:text-gray-400", children: description }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-4", children: actions && actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
+                  action.section && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-gray-500 dark:text-gray-400 mb-2", children: action.section }),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "py-1.5 px-2 -mx-2 flex items-center text-base text-gray-900 dark:text-gray-200 active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
+                      onClick: () => handleMenuClick(item.action || item.onClick),
+                      children: item.label
+                    },
+                    item.id
+                  )) }),
+                  actionIndex < actions.length - 1 && /* @__PURE__ */ jsx("hr", { className: "mt-2 border-transparent" })
+                ] }, action.id)) })
+              ] })
+            ]
+          }
+        )
+      ] }),
+      show && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "hidden sm:block fixed inset-0",
+          onClick: handleCloseMenu
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+var resetValues = {
+  show: false,
+  style: null,
+  tooltipStyle: null,
+  position: null,
+  description: null,
+  actions: null
+};
+function PopoverProvider({ children }) {
+  const [currentState, setCurrentState] = useState(0);
+  const [values, dispatch] = useReducer(reducer, resetValues);
+  const { show, style, tooltipStyle, position, description, actions } = values;
+  function reducer(state, action) {
+    const updatedValues = { ...state };
+    if ("show" in action) {
+      updatedValues.show = action.show;
+    }
+    if ("style" in action) {
+      updatedValues.style = action.style;
+    }
+    if ("tooltipStyle" in action) {
+      updatedValues.tooltipStyle = action.tooltipStyle;
+    }
+    if ("position" in action) {
+      updatedValues.position = action.position;
+    }
+    if ("description" in action) {
+      updatedValues.description = action.description;
+    }
+    if ("actions" in action) {
+      updatedValues.actions = action.actions;
+    }
+    if ("render" in action && !!action.render) {
+      setCurrentState((prev) => 1 - prev);
+    }
+    return updatedValues;
+  }
+  function handleShowPopover(params) {
+    dispatch({
+      ...params,
+      render: true
+    });
+  }
+  function handleClosePopover() {
+    dispatch({
+      ...resetValues,
+      render: true
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    PopoverContext.Provider,
+    {
+      value: {
+        showPopover: show,
+        setPopover: handleShowPopover
+      },
+      children: [
+        children,
+        !!show && /* @__PURE__ */ jsx(
+          PopoverCard,
+          {
+            show,
+            style,
+            tooltipStyle,
+            position,
+            description,
+            actions,
+            onClose: handleClosePopover
+          }
+        )
+      ]
+    }
+  );
+}
+function usePopoverContext() {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+}
+function Popover({ className, description, actions, children, opts }) {
+  const { activated } = opts || {};
+  const { showPopover, setPopover } = usePopoverContext();
+  const { screenWidth, screenHeight } = useResizeListener();
+  const [menuData, setMenuData] = useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
+  const parentRef = useRef(null);
+  (actions || []).some((action) => (action.items || []).length > 0);
+  useEffect(() => {
+    const stickyTop = menuData.showMenu && screenHeight - (menuData.y + 14) < 300;
+    setPopover({
+      show: menuData.showMenu,
+      style: !stickyTop ? {
+        top: menuData.bottom + 14,
+        right: screenWidth - menuData.right - 6
+      } : {
+        bottom: screenHeight - menuData.top + 12,
+        right: screenWidth - menuData.right - 6
+      },
+      tooltipStyle: !stickyTop ? {
+        top: menuData.bottom + 6,
+        right: screenWidth - menuData.right + 6
+      } : {
+        bottom: screenHeight - menuData.top + 4,
+        right: screenWidth - menuData.right + 6
+      },
+      position: stickyTop ? "top" : "bottom",
+      description,
+      actions
+    });
+  }, [menuData, screenWidth, screenHeight, description, actions, setPopover]);
+  useEffect(() => {
+    if (!showPopover && !!menuData.showMenu) {
+      setMenuData((prev) => ({
+        ...prev,
+        showMenu: false
+      }));
+    }
+  }, [showPopover, menuData.showMenu]);
+  function handleToggleMenu(e) {
+    e.stopPropagation();
+    if (menuData.showMenu) {
+      handleCloseMenu();
+    } else {
+      handleOpenMenu();
+    }
+  }
+  function handleOpenMenu() {
+    if (parentRef && parentRef.current) {
+      const coords = parentRef.current.getBoundingClientRect();
+      setMenuData({
+        showMenu: true,
+        left: coords.left,
+        right: coords.right,
+        top: coords.top,
+        bottom: coords.bottom,
+        x: screenWidth - coords.right,
+        y: coords.bottom
+      });
+    }
+  }
+  function handleCloseMenu() {
+    setMenuData({
+      showMenu: false,
+      x: 0,
+      y: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "block h-full", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: parentRef,
+      className: classNames({
+        "cursor-pointer py-0.5 px-2 h-full flex items-center justify-center hover:bg-gray-300/50 hover:dark:bg-charcoal-700 rounded-xl": true,
+        "bg-gray-300/50 dark:bg-charcoal-700": menuData.showMenu && !activated,
+        ...classNameObject(className)
+      }),
+      onClick: handleToggleMenu,
+      children
+    }
+  ) });
+}
+
+// src/utils/format.ts
+var srgbToLinear = (c) => {
+  c /= 255;
+  return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+var luminance = (r, g, b) => {
+  const R = srgbToLinear(r);
+  const G = srgbToLinear(g);
+  const B2 = srgbToLinear(b);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B2;
+};
+var contrastRatio = (L1, L2) => {
+  const [light, dark] = L1 > L2 ? [L1, L2] : [L2, L1];
+  return (light + 0.05) / (dark + 0.05);
+};
+var hexToRgb = (hex) => {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((x) => x + x).join("");
+  }
+  const num = parseInt(hex, 16);
+  return {
+    r: num >> 16 & 255,
+    g: num >> 8 & 255,
+    b: num & 255
+  };
+};
+function bestTextColorForBg(hex) {
+  const { r, g, b } = hexToRgb(hex || "#FFFFFF");
+  const Lbg = luminance(r, g, b);
+  const contrastWithWhite = contrastRatio(Lbg, 1);
+  const contrastWithBlack = contrastRatio(Lbg, 0);
+  return contrastWithWhite >= contrastWithBlack ? "white" : "black";
+}
+var numberFormatter = (x, decimal, opts) => {
+  const { decimalSign, thousandSign } = opts || {};
+  if (x === null || x === void 0 || x === "") return "";
+  const parsedX = typeof x === "string" ? parseFloat(x) : x;
+  if (isNaN(parsedX)) return "";
+  const value = Math.round(parsedX * 100) / 100;
+  if (typeof decimal == "number") {
+    if (Math.floor(value) == value) {
+      return value.toFixed(decimal || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousandSign || ",");
+    }
+    return value.toFixed(decimal).toString().replace(".", decimalSign || ".").replace(/\B(?=(\d{3})+(?!\d))/g, thousandSign || ",");
+  }
+  return parsedX.toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousandSign || ",");
+};
+function moveItem(items, movedItem, fromIndex, toIndex) {
+  return items.reduce((prev, item, itemIndex) => {
+    if (itemIndex === fromIndex) {
+      return prev;
+    }
+    if (itemIndex === toIndex) {
+      if (fromIndex < toIndex) {
+        return [...prev, item, movedItem];
+      } else {
+        return [...prev, movedItem, item];
+      }
+    }
+    return [...prev, item];
+  }, []);
+}
+function Dragger({
+  type,
+  parentClassName,
+  header,
+  records,
+  timestamp,
+  disabled,
+  children,
+  onChange
+}) {
+  const [, setCurrentState] = useState(0);
+  const [values, dispatch] = useReducer(reducer, {
+    items: null,
+    displayItems: null,
+    dragging: false,
+    dragItem: null,
+    dragFrom: null,
+    dragTo: null,
+    updated: false,
+    timer: null
+  });
+  const { items, displayItems, dragging, dragItem, dragFrom, dragTo, updated } = values || {};
+  const grandChildren = children && children.props.children;
+  const isValid = !disabled && !!records && !!children && !!grandChildren && grandChildren.length > 0;
+  useEffect(() => {
+    dispatch({
+      items: grandChildren,
+      updated: false,
+      render: true
+    });
+  }, [timestamp, grandChildren]);
+  useEffect(() => {
+    if (!updated) {
+      if (grandChildren && grandChildren.length > 0) {
+        dispatch({
+          items: grandChildren,
+          displayItems: grandChildren,
+          updated: false,
+          render: true
+        });
+      } else {
+        dispatch({
+          items: [],
+          displayItems: [],
+          updated: false,
+          render: true
+        });
+      }
+    }
+  }, [grandChildren, updated]);
+  function reducer(state, action) {
+    const updatedValues = { ...state };
+    if ("items" in action) {
+      updatedValues.items = action.items;
+    }
+    if ("displayItems" in action) {
+      updatedValues.displayItems = action.displayItems;
+    }
+    if ("dragging" in action) {
+      updatedValues.dragging = action.dragging;
+    }
+    if ("dragItem" in action) {
+      updatedValues.dragItem = action.dragItem;
+    }
+    if ("dragFrom" in action) {
+      updatedValues.dragFrom = action.dragFrom;
+    }
+    if ("dragTo" in action) {
+      updatedValues.dragTo = action.dragTo;
+    }
+    if ("updated" in action) {
+      updatedValues.updated = action.updated;
+    }
+    if ("timer" in action) {
+      updatedValues.timer = action.timer;
+    }
+    if ("cursorX" in action) {
+      updatedValues.cursorX = action.cursorX;
+    }
+    if ("cursorY" in action) {
+      updatedValues.cursorY = action.cursorY;
+    }
+    if (action.render) {
+      setCurrentState((prev) => 1 - prev);
+    }
+    return updatedValues;
+  }
+  if (!isValid) {
+    if (type === "table") {
+      return /* @__PURE__ */ jsxs("table", { className: parentClassName, children: [
+        header,
+        children
+      ] });
+    }
+    return children;
+  }
+  function handleDragStart(e, item, index) {
+    e.stopPropagation();
+    dispatch({
+      dragging: true,
+      dragItem: item,
+      dragFrom: index,
+      render: true
+    });
+  }
+  function handleDragEnd() {
+    if (dragFrom !== dragTo) {
+      const updatedItems = moveItem(items || [], dragItem, dragFrom, dragTo);
+      dispatch({
+        items: updatedItems,
+        displayItems: updatedItems,
+        dragging: false,
+        dragItem: null,
+        dragFrom: null,
+        dragTo: null,
+        updated: true,
+        render: true
+      });
+      if (typeof onChange === "function") {
+        const updated2 = !!updatedItems && updatedItems.map((updatedItem) => records.find((record) => record.id === updatedItem.key));
+        onChange(updated2);
+      }
+    } else {
+      dispatch({
+        items,
+        displayItems,
+        dragging: false,
+        dragItem: null,
+        dragFrom: null,
+        dragTo: null,
+        render: true
+      });
+    }
+  }
+  function handleDragOver(ev, index) {
+    ev.preventDefault();
+    if (dragging && dragTo !== index) {
+      if (dragFrom !== index) {
+        const updatedItems = moveItem(items || [], dragItem, dragFrom, index);
+        dispatch({
+          displayItems: updatedItems,
+          dragTo: index,
+          render: dragTo !== index
+        });
+      } else {
+        dispatch({
+          displayItems: items,
+          dragTo: index,
+          render: dragTo !== index
+        });
+      }
+    }
+  }
+  function handleContextMenu(e) {
+    e.preventDefault();
+  }
+  function handleTouchStart(e) {
+    const touch = e.touches[0] || e.changedTouches[0];
+    const { clientX, clientY } = touch;
+    const timer = setTimeout(() => handleLongTouchStart({ clientX, clientY }), 500);
+    dispatch({
+      timer,
+      cursorX: clientX,
+      cursorY: clientY,
+      dragging: false
+    });
+  }
+  function handleLongTouchStart({ clientX, clientY }) {
+    const difference = Math.abs(clientY - (values.cursorY || 0));
+    if (difference > 40) {
+      return false;
+    }
+    dispatch({ dragging: true });
+    const cards = records;
+    let elementInBoundary = null;
+    let elementIndex = null;
+    for (let i = 0; i < cards.length; i++) {
+      const cardItem = cards[i];
+      if (!!cardItem) {
+        const element = document.getElementById(cardItem.id);
+        if (element) {
+          const { top, right, bottom, left } = element.getBoundingClientRect();
+          if (left <= clientX && clientX <= right && top <= clientY && clientY <= bottom) {
+            elementInBoundary = element;
+            elementIndex = i;
+            break;
+          }
+        }
+      }
+    }
+    if (elementInBoundary && elementIndex !== null && items) {
+      dispatch({
+        dragging: true,
+        dragItem: items[elementIndex],
+        dragFrom: elementIndex,
+        render: true
+      });
+    }
+  }
+  function handleTouchMove(e) {
+    const touch = e.touches[0] || e.changedTouches[0];
+    const { clientX, clientY } = touch;
+    dispatch({
+      cursorX: clientX,
+      cursorY: clientY
+    });
+    if (values.dragging && items) {
+      const cards = records;
+      let targetIndex = null;
+      for (let i = 0; i < cards.length; i++) {
+        const cardItem = cards[i];
+        if (!!cardItem) {
+          const element = document.getElementById(cardItem.id);
+          if (element) {
+            const { top, right, bottom, left } = element.getBoundingClientRect();
+            if (left <= clientX && clientX <= right && top <= clientY && clientY <= bottom) {
+              targetIndex = i;
+              break;
+            }
+          }
+        }
+      }
+      if (targetIndex !== null && values.dragFrom !== targetIndex) {
+        const updatedItems = moveItem(items, values.dragItem, values.dragFrom, targetIndex);
+        dispatch({
+          displayItems: updatedItems,
+          dragTo: targetIndex,
+          render: dragTo !== targetIndex
+        });
+      } else {
+        dispatch({
+          displayItems: items,
+          dragTo: values.dragFrom,
+          render: dragTo !== values.dragFrom
+        });
+      }
+    }
+  }
+  function handleTouchEnd() {
+    if (dragFrom !== dragTo) {
+      const updatedItems = moveItem(values.items || [], values.dragItem, values.dragFrom, values.dragTo);
+      dispatch({
+        items: updatedItems,
+        displayItems: updatedItems,
+        dragging: false,
+        dragItem: null,
+        dragFrom: null,
+        dragTo: null,
+        updated: true,
+        render: true
+      });
+      if (typeof onChange === "function") {
+        const updated2 = !!updatedItems && updatedItems.map((updatedItem) => records.find((record) => record.id === updatedItem.key));
+        onChange(updated2);
+      }
+    } else {
+      dispatch({
+        items,
+        displayItems,
+        dragging: false,
+        dragItem: null,
+        dragFrom: null,
+        dragTo: null,
+        render: true
+      });
+    }
+    if (values.timer) {
+      clearTimeout(values.timer);
+    }
+    dispatch({ dragging: false });
+  }
+  const derivedItems = !!items && React15.cloneElement(children, {
+    children: items.map((grandChild, index) => {
+      return React15.cloneElement(grandChild, {
+        id: (records[index] || {}).id,
+        draggable: true,
+        className: classNames({
+          ...classNameObject(grandChild.props.className),
+          "opacity-0": !!dragging && dragTo === index
+        }),
+        onDragStart: (e) => handleDragStart(e, grandChild, index),
+        onDragEnd: () => handleDragEnd(),
+        onDragOver: (ev) => handleDragOver(ev, index),
+        onTouchStart: (e) => handleTouchStart(e),
+        onTouchMove: (e) => handleTouchMove(e),
+        onTouchEnd: () => handleTouchEnd(),
+        onContextMenu: (e) => handleContextMenu(e)
+      });
+    })
+  });
+  const derivedDisplayItems = !!displayItems && React15.cloneElement(children, {
+    children: displayItems.map((grandChild, index) => {
+      return React15.cloneElement(grandChild, {
+        draggable: true,
+        className: classNames({
+          ...classNameObject(grandChild.props.className),
+          "opacity-25 sm:opacity-0": !!dragging && dragTo === index
+        })
+      });
+    })
+  });
+  if (type === "table") {
+    return /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: classNames({
+          "relative": true,
+          ...classNameObject(parentClassName)
+        }),
+        children: [
+          header,
+          derivedItems,
+          /* @__PURE__ */ jsx(
+            "tbody",
+            {
+              className: classNames({
+                "absolute top-10 left-0 right-0 z-20 pointer-events-none": true,
+                "hidden": !dragging
+              }),
+              children: derivedDisplayItems
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    derivedItems,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames({
+          "absolute top-0 left-0 right-0 z-20 pointer-events-none bg-white dark:bg-gray-900": true,
+          "hidden": !dragging
+        }),
+        children: derivedDisplayItems
+      }
+    )
+  ] });
+}
+function ExcelTable({
+  columns = [],
+  data = [],
+  onChange,
+  onRowAdd,
+  onRowDelete,
+  placeholder,
+  isAddRowVisible = true,
+  addRowLabel = "+ Add Option"
+}) {
+  const [editingCell, setEditingCell] = useState(null);
+  useEffect(() => {
+    setTimeout(() => {
+      const textareas = document.querySelectorAll(".excel-table-textarea");
+      textareas.forEach((ta) => {
+        ta.style.height = "auto";
+        ta.style.height = ta.scrollHeight + "px";
+      });
+    }, 0);
+  }, [data]);
+  const handleCellNavigation = (e, currentRow, currentCol) => {
+    const isEditing = editingCell?.row === currentRow && editingCell?.col === currentCol;
+    const totalRows = data.length;
+    const totalCols = columns.length + 1;
+    const addRowIndex = totalRows;
+    let nextRow = currentRow;
+    let nextCol = currentCol;
+    const isAddRow = currentRow === addRowIndex;
+    if (isEditing) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        setEditingCell(null);
+        if (currentRow < totalRows - 1) nextRow = currentRow + 1;
+        else if (currentRow === totalRows - 1) nextRow = addRowIndex;
+      } else {
+        return;
+      }
+    } else {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+        e.preventDefault();
+        if (e.key === "ArrowUp") {
+          if (isAddRow) nextRow = totalRows - 1;
+          else nextRow = Math.max(0, currentRow - 1);
+        }
+        if (e.key === "ArrowDown") {
+          if (currentRow < totalRows - 1) nextRow = currentRow + 1;
+          else if (currentRow === totalRows - 1) nextRow = addRowIndex;
+        }
+        if (e.key === "ArrowLeft") nextCol = Math.max(0, currentCol - 1);
+        if (e.key === "ArrowRight") nextCol = Math.min(totalCols - 1, currentCol + 1);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (isAddRow) {
+          onRowAdd && onRowAdd();
+          setTimeout(() => {
+            const target = document.querySelector(`[data-row="${totalRows}"][data-col="0"]`);
+            if (target) {
+              target.focus();
+              target.click();
+            }
+          }, 0);
+          return;
+        } else if (currentCol < columns.length) {
+          setEditingCell({ row: currentRow, col: currentCol });
+        } else {
+          onRowDelete && onRowDelete(currentRow);
+          setTimeout(() => {
+            const targetRow = currentRow < data.length - 1 ? currentRow : Math.max(0, currentRow - 1);
+            const target = document.querySelector(`[data-row="${targetRow}"][data-col="${columns.length}"]`);
+            if (target) target.focus();
+            else {
+              const addBtn = document.getElementById("add-option-btn");
+              if (addBtn) addBtn.focus();
+            }
+          }, 0);
+          return;
+        }
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && !isAddRow && currentCol < columns.length) {
+        setEditingCell({ row: currentRow, col: currentCol });
+        return;
+      }
+    }
+    if (nextRow !== currentRow || nextCol !== currentCol) {
+      if (nextRow === addRowIndex) {
+        const target = document.getElementById("add-option-btn");
+        if (target) target.focus();
+      } else {
+        const target = document.querySelector(`[data-row="${nextRow}"][data-col="${nextCol}"]`);
+        if (target) {
+          target.focus();
+          if (target.tagName === "INPUT" && target.type !== "checkbox" || target.tagName === "TEXTAREA") {
+            target.select();
+          }
+        }
+      }
+    }
+  };
+  const handleFocus = (e, row, col) => {
+    if (editingCell?.row !== row || editingCell?.col !== col) {
+      setEditingCell(null);
+      e.target.select();
+    }
+  };
+  const handleChange = (rowIdx, colId, val) => {
+    const newData = [...data];
+    newData[rowIdx] = { ...newData[rowIdx], [colId]: val };
+    onChange && onChange(newData);
+  };
+  const handlePaste = (e, startRow, startCol) => {
+    e.preventDefault();
+    const clipboardData = e.clipboardData.getData("text/plain");
+    const rows = clipboardData.split(/\r\n|\n|\r/).filter((row) => row.trim() !== "");
+    let newData = [...data];
+    rows.forEach((row, rIdx) => {
+      const targetRowIdx = startRow + rIdx;
+      const cells = row.split("	");
+      if (!newData[targetRowIdx]) {
+        newData[targetRowIdx] = {};
+      }
+      columns.forEach((col, cIdx) => {
+        const colIndexInPaste = cIdx - startCol;
+        if (colIndexInPaste >= 0 && cells[colIndexInPaste] !== void 0) {
+          const val = cells[colIndexInPaste];
+          newData[targetRowIdx] = { ...newData[targetRowIdx], [col.id]: val };
+        }
+      });
+    });
+    onChange && onChange(newData);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "border border-gray-200 dark:border-charcoal-600 rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse bg-white dark:bg-charcoal-900", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      columns.map((col, idx) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: classNames({
+            "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-gray-500": true,
+            "w-auto": !col.width,
+            [col.width || ""]: !!col.width,
+            "text-left": !col.align,
+            "text-center": col.align === "center",
+            "text-right": col.align === "right"
+          }),
+          children: col.label
+        },
+        col.id || idx
+      )),
+      /* @__PURE__ */ jsx("th", { className: "border-b border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 w-8" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      data.map((row, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "group", children: [
+        columns.map((col, colIdx) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "border-b border-r border-gray-200 dark:border-charcoal-600 p-0 relative align-top h-auto",
+            children: col.type === "textarea" ? /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                rows: 1,
+                value: row[col.id] || "",
+                onChange: (e) => {
+                  handleChange(rowIdx, col.id, e.target.value);
+                  e.target.style.height = "auto";
+                  e.target.style.height = e.target.scrollHeight + "px";
+                },
+                onFocus: (e) => handleFocus(e, rowIdx, colIdx),
+                onKeyDown: (e) => handleCellNavigation(e, rowIdx, colIdx),
+                onPaste: (e) => handlePaste(e, rowIdx, colIdx),
+                "data-row": rowIdx,
+                "data-col": colIdx,
+                placeholder: typeof placeholder === "function" ? placeholder(rowIdx) : placeholder,
+                className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400 resize-none overflow-hidden leading-normal block",
+                style: { height: "auto" }
+              }
+            ) : col.type === "checkbox" ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[38px]", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !!row[col.id],
+                onChange: (e) => handleChange(rowIdx, col.id, e.target.checked),
+                onKeyDown: (e) => handleCellNavigation(e, rowIdx, colIdx),
+                "data-row": rowIdx,
+                "data-col": colIdx,
+                className: "w-5 h-5 cursor-pointer accent-primary-500"
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: col.type === "number" ? "number" : "text",
+                value: row[col.id] || "",
+                onChange: (e) => handleChange(rowIdx, col.id, e.target.value),
+                onFocus: (e) => handleFocus(e, rowIdx, colIdx),
+                onKeyDown: (e) => handleCellNavigation(e, rowIdx, colIdx),
+                onPaste: (e) => handlePaste(e, rowIdx, colIdx),
+                "data-row": rowIdx,
+                "data-col": colIdx,
+                className: classNames({
+                  "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white": true,
+                  "text-left": col.align !== "center" && col.align !== "right",
+                  "text-center": col.align === "center",
+                  "text-right": col.align === "right"
+                }),
+                placeholder: col.type === "number" ? "0" : ""
+              }
+            )
+          },
+          col.id || colIdx
+        )),
+        /* @__PURE__ */ jsx("td", { className: "border-b border-gray-200 dark:border-charcoal-600 p-0 text-center align-top h-auto", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => onRowDelete && onRowDelete(rowIdx),
+            onFocus: () => setEditingCell(null),
+            onKeyDown: (e) => handleCellNavigation(e, rowIdx, columns.length),
+            "data-row": rowIdx,
+            "data-col": columns.length,
+            tabIndex: 0,
+            className: "cursor-pointer text-gray-300 hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
+            children: "\xD7"
+          }
+        ) })
+      ] }, rowIdx)),
+      isAddRowVisible && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + 1, className: "p-0", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: "add-option-btn",
+          onClick: onRowAdd,
+          onKeyDown: (e) => handleCellNavigation(e, data.length, 0),
+          tabIndex: 0,
+          className: "w-full cursor-pointer text-left px-3 py-2 text-gray-400 text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
+          children: addRowLabel
+        }
+      ) }) })
+    ] })
+  ] }) });
+}
+function Coverflow({ images = [], onClose }) {
+  const scrollContainerRef = useRef(null);
+  const thumbnailContainerRef = useRef(null);
+  const [visualIndex, setVisualIndex] = useState(0);
+  const isJumpingRef = useRef(false);
+  const wheelLockRef = useRef(false);
+  const wheelTimeoutRef = useRef(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const count = images.length;
+  const hasMultiple = count > 1;
+  const extendedImages = hasMultiple ? [images[count - 1], ...images, images[0]] : images;
+  useEffect(() => {
+    if (hasMultiple && scrollContainerRef.current) {
+      const container = scrollContainerRef.current;
+      const width = container.offsetWidth;
+      container.scrollLeft = width;
+      setVisualIndex(1);
+      requestAnimationFrame(() => setIsReady(true));
+    } else {
+      setIsReady(true);
+    }
+  }, [hasMultiple]);
+  useEffect(() => {
+    if (hasMultiple && thumbnailContainerRef.current) {
+      const thumbContainer = thumbnailContainerRef.current;
+      const thumbNode = thumbContainer.children[visualIndex];
+      if (thumbNode) {
+        thumbNode.scrollIntoView({
+          behavior: isJumpingRef.current ? "auto" : "smooth",
+          block: "nearest",
+          inline: "center"
+        });
+      }
+    }
+  }, [visualIndex, hasMultiple]);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container || !hasMultiple) return;
+    const handleWheel = (e) => {
+      if (e.ctrlKey) return;
+      e.preventDefault();
+      if (!wheelLockRef.current) {
+        const threshold = 10;
+        if (Math.abs(e.deltaX) > threshold || Math.abs(e.deltaY) > threshold) {
+          const width = container.offsetWidth;
+          const currentIndex = Math.round(container.scrollLeft / width);
+          let targetIndex = currentIndex;
+          if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+            targetIndex = e.deltaX > 0 ? currentIndex + 1 : currentIndex - 1;
+          } else {
+            targetIndex = e.deltaY > 0 ? currentIndex + 1 : currentIndex - 1;
+          }
+          container.scrollTo({
+            left: targetIndex * width,
+            behavior: "smooth"
+          });
+          wheelLockRef.current = true;
+        }
+      }
+      if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
+      wheelTimeoutRef.current = setTimeout(() => {
+        wheelLockRef.current = false;
+      }, 200);
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+      if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
+    };
+  }, [hasMultiple]);
+  const handleScroll = () => {
+    if (!scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const { scrollLeft, offsetWidth } = container;
+    const scrollIndex = scrollLeft / offsetWidth;
+    const roundedIndex = Math.round(scrollIndex);
+    if (roundedIndex !== visualIndex) {
+      setVisualIndex(roundedIndex);
+    }
+    if (isJumpingRef.current) return;
+    if (scrollLeft <= 0) {
+      performJump(count * offsetWidth);
+    } else if (Math.abs(scrollLeft - (count + 1) * offsetWidth) < 2) {
+      performJump(offsetWidth);
+    }
+  };
+  const performJump = (targetLeft) => {
+    if (!scrollContainerRef.current) return;
+    isJumpingRef.current = true;
+    const container = scrollContainerRef.current;
+    container.style.scrollBehavior = "auto";
+    container.scrollLeft = targetLeft;
+    container.style.scrollBehavior = "";
+    const newIndex = Math.round(targetLeft / container.offsetWidth);
+    setVisualIndex(newIndex);
+    if (thumbnailContainerRef.current) {
+      const thumbContainer = thumbnailContainerRef.current;
+      const thumbNode = thumbContainer.children[newIndex];
+      if (thumbNode) {
+        thumbNode.scrollIntoView({
+          behavior: "auto",
+          block: "nearest",
+          inline: "center"
+        });
+      }
+    }
+    setTimeout(() => {
+      isJumpingRef.current = false;
+    }, 50);
+  };
+  const scrollToIndex = (targetVisualIndex) => {
+    if (!scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const width = container.offsetWidth;
+    container.scrollTo({
+      left: width * targetVisualIndex,
+      behavior: "smooth"
+    });
+  };
+  const nextSlide = (e) => {
+    if (!scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const width = container.offsetWidth;
+    const nextIndex = Math.round(container.scrollLeft / width) + 1;
+    container.scrollTo({
+      left: nextIndex * width,
+      behavior: "smooth"
+    });
+  };
+  const prevSlide = (e) => {
+    if (!scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const width = container.offsetWidth;
+    const prevIndex = Math.round(container.scrollLeft / width) - 1;
+    container.scrollTo({
+      left: prevIndex * width,
+      behavior: "smooth"
+    });
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose && onClose();
+      if (e.key === "ArrowLeft") prevSlide();
+      if (e.key === "ArrowRight") nextSlide();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  if (!isMounted || !images || images.length === 0) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[1400] bg-black/95 flex flex-col justify-between animate-fadeIn transition-opacity duration-300", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          onClick: onClose,
+          className: "absolute top-4 right-4 z-[110] p-2 bg-black/20 hover:bg-white/20 rounded-full text-white transition-colors cursor-pointer",
+          children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "w-6 h-6", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 relative flex items-center justify-center overflow-hidden w-full h-full", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollContainerRef,
+          onScroll: handleScroll,
+          className: classNames({
+            "w-full h-full flex overflow-x-auto snap-x snap-mandatory scrollbar-none": true,
+            "opacity-0": hasMultiple && !isReady,
+            "opacity-100": !hasMultiple || isReady
+          }),
+          children: extendedImages.map((img, index) => {
+            const key = `${img.id || index}-${index}`;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-full h-full flex-shrink-0 flex items-center justify-center snap-center relative p-4",
+                children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full max-w-4xl max-h-[75vh] flex items-center justify-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: img.imageUrl,
+                      alt: img.imageTitle || "Gallery Image",
+                      className: "max-w-full max-h-full object-contain drop-shadow-2xl"
+                    }
+                  ),
+                  (img.imageTitle || img.imageDescription) && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/90 via-black/50 to-transparent text-white text-center pointer-events-none", children: [
+                    img.imageTitle && /* @__PURE__ */ jsx(H3, { className: "!text-base mb-1", children: img.imageTitle }),
+                    img.imageDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-charcoal-200 max-w-2xl mx-auto", children: img.imageDescription })
+                  ] })
+                ] })
+              },
+              key
+            );
+          })
+        }
+      ) }),
+      hasMultiple && /* @__PURE__ */ jsxs("div", { className: "w-full p-4 pb-8 bg-gradient-to-t from-black to-transparent flex items-center justify-center gap-4 z-50", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => prevSlide(),
+            className: "p-2 rounded-full hover:bg-white/10 text-white transition-colors flex-shrink-0 cursor-pointer",
+            children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: thumbnailContainerRef,
+            className: "flex gap-2 overflow-x-auto no-scrollbar max-w-xl px-2 snap-x",
+            children: extendedImages.map((img, idx) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: () => scrollToIndex(idx),
+                className: classNames({
+                  "relative w-14 h-14 flex-shrink-0 rounded-md overflow-hidden border transition-all duration-300 snap-center cursor-pointer": true,
+                  "border-primary-500 opacity-100": visualIndex === idx,
+                  "border-transparent opacity-40 hover:opacity-80": visualIndex !== idx
+                }),
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: img.imageUrl,
+                    alt: "Thumbnail",
+                    className: "w-full h-full object-cover transition-transform duration-300"
+                  }
+                )
+              },
+              `${img.id || idx}-${idx}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => nextSlide(),
+            className: "p-2 rounded-full hover:bg-white/10 text-white transition-colors flex-shrink-0 cursor-pointer",
+            children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 2, stroke: "currentColor", className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) })
+          }
+        )
+      ] })
+    ] }),
+    document.body
+  );
+}
+function CurrencyDisplay({ loading, error, currency, amount, decimal = 2, opts }) {
+  const { contentFull } = opts || {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "flex space-x-2 justify-between items-center group": true,
+        "w-full": !!contentFull,
+        "-ml-1.5 text-red-500": amount < 0,
+        "text-red-500": !!error,
+        "animate-pulse bg-gray-100 text-transparent rounded-md": !!loading
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: classNames({
+              "group-hover:text-inherit": true,
+              "!text-transparent": !!loading,
+              "text-red-200": amount < 0 || !!error,
+              "text-gray-200": (!amount || amount >= 0) && !error
+            }),
+            children: [
+              amount < 0 && "-",
+              currency || "$"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: amount ? numberFormatter(Math.abs(amount), decimal) : "-" })
+      ]
+    }
+  );
+}
+function DataTableRow({ index, selected, label, description, additionalDescription, data, opts }) {
+  const { labelCenter, vertical, darkMode } = opts || {};
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: classNames({
+        "align-top group dark:even:bg-charcoal-800 dark:odd:bg-charcoal-700": true,
+        "!bg-primary-500/30 dark:!bg-primary-500/10 !text-black dark:!text-primary-400": selected,
+        "even:bg-cream-50 odd:bg-white": !darkMode,
+        "even:bg-charcoal-800 odd:bg-charcoal-700": !!darkMode
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: classNames({
+              "py-1.5 px-2 sm:px-3 cursor-default whitespace-nowrap first:rounded-l-lg last:rounded-r-lg cursor-pointer": true,
+              "text-center": !!labelCenter,
+              "align-middle": vertical === "middle"
+            }),
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsxs("td", { className: "px-2 py-1.5 sm:px-3 min-w-64 cursor-default first:rounded-l-lg last:rounded-r-lg cursor-pointer", children: [
+          description,
+          additionalDescription && /* @__PURE__ */ jsx("p", { className: "uppercase opacity-50", children: additionalDescription })
+        ] }),
+        data.map((dataItem, dataIndex) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: classNames({
+              "text-center py-1.5 px-2 sm:px-3 cursor-default first:rounded-l-lg last:rounded-r-lg cursor-pointer": true,
+              "!bg-primary-100 !text-primary-500 font-semibold": !!dataItem.threshold && dataItem.data[index] > dataItem.threshold,
+              "!text-left": dataItem.align === "left",
+              "align-middle": vertical === "middle"
+            }),
+            children: typeof dataItem.data[index] === "string" || React15.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
+          },
+          `${dataIndex}-${index}`
+        ))
+      ]
+    }
+  );
+}
+function DataTable({
+  headers,
+  labels,
+  selectedId,
+  descriptions,
+  additionalDescriptions,
+  colors,
+  data,
+  total,
+  opts
+}) {
+  const { mobileView } = useResizeListener();
+  const { ignoreTotal, showCurrency, labelTitle, labelCentered, vertical, darkMode } = opts || {};
+  const [displayHeaders, setDisplayHeaders] = useState([]);
+  useEffect(() => {
+    setDisplayHeaders(headers);
+  }, [headers]);
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: classNames({
+        "w-full text-sm dark:text-charcoal-100 rounded-xl border-separate border-spacing-0": true,
+        "text-charcoal-100": !!darkMode,
+        "text-charcoal-500": !darkMode
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("thead", { children: [
+          !displayHeaders && /* @__PURE__ */ jsxs("tr", { className: "font-semibold uppercase", children: [
+            /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: classNames({
+                  "px-2 py-2.5 px-2 sm:px-3 whitespace-nowrap w-4": true,
+                  "text-center": !!labelCentered
+                }),
+                children: mobileView ? "#" : labelTitle || "Code"
+              }
+            ),
+            (descriptions || []).length > 0 && /* @__PURE__ */ jsx("td", { className: "py-2.5 px-2 sm:px-3 bg-gray-50", children: "Description" }),
+            data.map((dataItem, dataIndex) => /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: classNames({
+                  "w-4 py-2.5 px-2 sm:px-3 whitespace-nowrap text-center": true,
+                  "bg-gray-50": !colors,
+                  "!text-left": dataItem.align === "left"
+                }),
+                style: colors && colors[dataIndex] ? {
+                  backgroundColor: `${colors[dataIndex]}`,
+                  color: bestTextColorForBg(colors[dataIndex])
+                } : void 0,
+                children: dataItem.label
+              },
+              dataItem.key || dataItem.label
+            ))
+          ] }),
+          displayHeaders && /* @__PURE__ */ jsx("tr", { className: "text-xs font-semibold uppercase", children: displayHeaders })
+        ] }),
+        /* @__PURE__ */ jsx("tbody", { children: (labels || []).map((label, index) => {
+          const keyData = data[0]?.data || [];
+          return /* @__PURE__ */ jsx(
+            DataTableRow,
+            {
+              index,
+              label,
+              selected: selectedId === keyData[index]?.props?.recordId,
+              description: descriptions && descriptions[index],
+              additionalDescription: additionalDescriptions && additionalDescriptions[index],
+              data,
+              opts: {
+                labelCenter: labelCentered,
+                vertical,
+                darkMode
+              }
+            },
+            (keyData[index] || {}).key || index
+          );
+        }) }),
+        !ignoreTotal && /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { className: "group", children: [
+          /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: (descriptions || []).length === 0 ? 1 : 2,
+              className: classNames({
+                "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 font-semibold uppercase": true,
+                "border-charcoal-500": !!darkMode,
+                "border-gray-100 bg-gray-50": !darkMode
+              }),
+              children: "Total"
+            }
+          ),
+          !total && data.map((dataItem, dataIndex) => {
+            const sumVal = dataItem.data ? dataItem.data.reduce((a, b) => a + (Number(b) || 0), 0) : 0;
+            return /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: classNames({
+                  "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
+                  "bg-gray-50": !colors && !darkMode,
+                  "border-gray-100": !darkMode,
+                  "border-charcoal-500": !!darkMode
+                }),
+                style: colors && colors[dataIndex] ? {
+                  backgroundColor: `${colors[dataIndex]}`,
+                  color: bestTextColorForBg(colors[dataIndex])
+                } : void 0,
+                children: typeof dataItem.total === "string" ? dataItem.total != null ? dataItem.total : sumVal : showCurrency ? /* @__PURE__ */ jsx(
+                  CurrencyDisplay,
+                  {
+                    amount: dataItem.total
+                  }
+                ) : numberFormatter(dataItem.total != null ? dataItem.total : sumVal, 1)
+              },
+              `${dataIndex}-total`
+            );
+          }),
+          !!total && total.map((dataItem, dataIndex) => /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: classNames({
+                "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
+                "bg-gray-50": !colors && !darkMode,
+                "border-gray-100": !darkMode,
+                "border-charcoal-500": !!darkMode
+              }),
+              style: colors && colors[dataIndex] ? {
+                backgroundColor: `${colors[dataIndex]}`,
+                color: bestTextColorForBg(colors[dataIndex])
+              } : void 0,
+              children: typeof total[dataIndex] === "string" || React15.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
+            },
+            `${dataIndex}-total`
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+function NumberDisplay({ loading, amount, error, decimal = 0 }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "flex space-x-2 items-center justify-between group w-full": true,
+        "text-red-500": amount < 0 || !!error,
+        "animate-pulse bg-gray-100 text-transparent rounded-md": !!loading
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames({
+              "group-hover:text-inherit": true,
+              "!text-transparent": !!loading,
+              "text-red-200": amount < 0 || !!error,
+              "text-gray-200": amount >= 0 && !error
+            }),
+            children: amount < 0 && "-"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-right", children: amount ? numberFormatter(Math.abs(amount), decimal) : "" })
+      ]
+    }
+  );
+}
+function ChangeDisplay({ postfix = "%", data = [], decimal = 0 }) {
+  const [current, prev] = data;
+  function calculateGrowthPercentage(curr, previous) {
+    if (!previous && !curr) {
+      return 0;
+    }
+    if (!previous) {
+      return Infinity;
+    }
+    return (curr - previous) * 100 / previous;
+  }
+  const CAPPED = 1e4;
+  const growth = calculateGrowthPercentage(current, prev);
+  const displayGrowth = Math.max(Math.min(growth, CAPPED), -CAPPED);
+  if (prev > 0 && current === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center space-x-2 text-red-600 w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 text-right", children: "Lost" }),
+      /* @__PURE__ */ jsx("div", { className: "opacity-30 group-hover:opacity-100", children: "\u25BC" })
+    ] });
+  }
+  if (growth === Infinity) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center space-x-2 text-green-600 w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 text-right", children: "New" }),
+      /* @__PURE__ */ jsx("div", { className: "opacity-30 group-hover:opacity-100", children: "\u25B2" })
+    ] });
+  }
+  if (growth === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center space-x-2 w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 text-right", children: "-" }),
+      /* @__PURE__ */ jsx("div", { children: "\xA0" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "flex justify-between items-center space-x-2 whitespace-nowrap w-full": true,
+        "text-red-600": growth < 0,
+        "text-green-600": growth > 0
+      }),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 text-right", children: [
+          Math.abs(growth) <= CAPPED && (growth >= 0 ? "+" : "-"),
+          growth > CAPPED && " >",
+          growth < -CAPPED && " <",
+          numberFormatter(Math.abs(displayGrowth), decimal),
+          postfix
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "opacity-30 group-hover:opacity-100", children: growth > 0 ? /* @__PURE__ */ jsx(Fragment, { children: "\u25B2" }) : /* @__PURE__ */ jsx(Fragment, { children: "\u25BC" }) })
+      ]
+    }
+  );
+}
+function DateTimeDisplay({ loading, value }) {
+  let formatted = "-";
+  try {
+    if (value) {
+      formatted = new Intl.DateTimeFormat("en-GB", {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+      }).format(new Date(value));
+    }
+  } catch (e) {
+    formatted = String(value);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        "w-full whitespace-nowrap": true,
+        "animate-pulse bg-gray-100 text-transparent rounded-md": !!loading
+      }),
+      children: formatted
+    }
+  );
+}
+function ThumbnailDisplay({ loading, value }) {
+  const image = Array.isArray(value) ? value.length > 0 ? value[0] : null : value;
+  const { imageUrl, imageDescription } = image || {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "w-full whitespace-nowrap": true,
+        "animate-pulse bg-gray-100 text-transparent rounded-md": !!loading
+      }),
+      children: [
+        image && imageUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: imageDescription || "",
+            className: "w-8 min-w-8 h-8 object-cover rounded-md"
+          }
+        ),
+        !image && /* @__PURE__ */ jsx("div", { className: "w-8 min-w-8 h-8 bg-gray-100 dark:bg-charcoal-800 rounded-md" })
+      ]
+    }
+  );
+}
+function DataGridHeader({ sort, onClick, opts, children }) {
+  const { align, grow, noWrap, isSorted, stickyHeader, darkMode } = opts || {};
+  if (sort) {
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: classNames({
+          "py-2.5 px-2 sm:px-3 whitespace-nowrap text-center cursor-pointer font-semibold": true,
+          "w-4": !grow,
+          "!text-left": align === "left",
+          "!text-right": align === "right",
+          "whitespace-nowrap": !!noWrap,
+          "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
+          "bg-cream-50": !darkMode,
+          "bg-charcoal-800": !!darkMode
+        }),
+        onClick,
+        children: /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+          children,
+          isSorted && /* @__PURE__ */ jsxs("div", { className: "absolute top-0 bottom-0 -right-3.5 flex items-center", children: [
+            isSorted === "asc" && /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" }) }),
+            isSorted === "desc" && /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-3 h-3", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3" }) })
+          ] })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: classNames({
+        "py-2.5 px-2 sm:px-3 text-center font-semibold": true,
+        "w-4": !grow,
+        "!text-left": align === "left",
+        "whitespace-nowrap": !!noWrap,
+        "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
+        "bg-cream-50": !darkMode,
+        "bg-charcoal-800": !!darkMode
+      }),
+      children
+    }
+  );
+}
+function DataGridElement({ processing: defaultProcessing, type, value, error, menu, params, opts, onSelect }) {
+  const [processing, setProcessing] = useState(defaultProcessing);
+  useEffect(() => {
+    setProcessing(defaultProcessing);
+  }, [defaultProcessing]);
+  const { align } = opts || {};
+  if (!processing && menu) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        actions: [
+          {
+            id: "edit-section",
+            section: "Action",
+            items: menu.map((menuItem) => {
+              return {
+                id: menuItem.id,
+                label: menuItem.label,
+                action: async () => {
+                  setProcessing(true);
+                  await menuItem.onClick(params);
+                  setProcessing(false);
+                }
+              };
+            })
+          }
+        ],
+        opts: { compact: true, asBlock: true, align },
+        children: /* @__PURE__ */ jsx(
+          DataGridContent,
+          {
+            loading: processing,
+            error,
+            type,
+            value,
+            opts: {
+              ...opts,
+              contentFull: true
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DataGridContent,
+    {
+      loading: processing,
+      error,
+      type,
+      value,
+      opts,
+      onClick: () => {
+        if (typeof onSelect === "function") {
+          onSelect(params?.row);
+        }
+      }
+    }
+  );
+}
+function DataGridContent({ loading, error, type, value, opts, onClick }) {
+  if (type === "currency") {
+    return /* @__PURE__ */ jsx(CurrencyDisplay, { loading, error, amount: value, opts });
+  }
+  if (type === "number") {
+    return /* @__PURE__ */ jsx(NumberDisplay, { loading, error, amount: value });
+  }
+  if (type === "change") {
+    const [current, previous] = value || [];
+    return /* @__PURE__ */ jsx(ChangeDisplay, { data: [current, previous], decimal: 0 });
+  }
+  if (type === "datetime") {
+    return /* @__PURE__ */ jsx(DateTimeDisplay, { value });
+  }
+  if (type === "thumbnail") {
+    return /* @__PURE__ */ jsx(ThumbnailDisplay, { value });
+  }
+  const { noWrap, lineClamp } = opts || {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames({
+        "whitespace-nowrap": !!noWrap,
+        "line-clamp-1": lineClamp === 1,
+        "line-clamp-2": lineClamp === 2,
+        "line-clamp-3": lineClamp === 3,
+        "animate-pulse bg-gray-100 text-transparent pointer-events-none": !!loading
+      }),
+      onClick,
+      children: value
+    }
+  );
+}
+function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
+  const [displayedData, setDisplayedData] = useState([]);
+  const [orderByState, setOrderByState] = useState({
+    category: headers[0]?.id || "",
+    direction: "asc"
+  });
+  const displayedHeaders = (headers || []).filter((header) => !header.hidden);
+  function handleSort(category) {
+    if (orderByState.category !== category) {
+      setOrderByState({ category, direction: "asc" });
+    } else {
+      setOrderByState({ category, direction: orderByState.direction === "asc" ? "desc" : "asc" });
+    }
+  }
+  useEffect(() => {
+    if ((data || []).length > 0) {
+      const availableKeys = (headers || []).map((header) => header.id);
+      const { category, direction } = orderByState;
+      const sortCategory = availableKeys.includes(category) ? category : headers[0]?.id;
+      const sortDirection = ["asc", "desc"].includes(direction) ? direction : "asc";
+      const targetHeader = headers.find((header) => header.id === sortCategory);
+      const headerType = targetHeader?.type;
+      let sortedData = [...data];
+      if (headerType === "change") {
+        sortedData = sortedData.sort((a, b) => {
+          const x = a[sortCategory] || [0, 0];
+          const y = b[sortCategory] || [0, 0];
+          const left = x[1] ? (x[0] - x[1]) / x[1] : Infinity;
+          const right = y[1] ? (y[0] - y[1]) / y[1] : Infinity;
+          const multiplier = sortDirection === "asc" ? 1 : -1;
+          if (left < right) {
+            return multiplier * -1;
+          }
+          if (left > right) {
+            return multiplier * 1;
+          }
+          if (x[0] - x[1] < y[0] - y[1]) {
+            return multiplier * -1;
+          }
+          if (x[0] - x[1] > y[0] - y[1]) {
+            return multiplier * 1;
+          }
+          return 0;
+        });
+      } else {
+        sortedData.sort((a, b) => {
+          let aVal = a[sortCategory];
+          let bVal = b[sortCategory];
+          if (aVal === bVal) return 0;
+          if (aVal === null || aVal === void 0) return 1;
+          if (bVal === null || bVal === void 0) return -1;
+          if (typeof aVal === "string") {
+            aVal = aVal.toLowerCase();
+          }
+          if (typeof bVal === "string") {
+            bVal = bVal.toLowerCase();
+          }
+          const comparison = aVal < bVal ? -1 : 1;
+          return sortDirection === "asc" ? comparison : -comparison;
+        });
+      }
+      const updatedData = (displayedHeaders || []).map((header) => {
+        return {
+          key: header.id,
+          label: header.label,
+          align: header.align,
+          data: (sortedData || []).map((row, rowIndex) => {
+            const isError = header.error && Function("value", `return ${header.error}`)(row[header.id]);
+            const [timestamp] = (header.id || "").split(" - ");
+            const isProcessing = row[`${timestamp} - processing`];
+            return /* @__PURE__ */ jsx(
+              DataGridElement,
+              {
+                processing: isProcessing,
+                type: header.type,
+                value: row[header.id],
+                menu: header.menu,
+                opts: {
+                  align: header.align,
+                  noWrap: header.noWrap,
+                  vAlign: header.vertical,
+                  lineClamp: header.lineClamp
+                },
+                params: {
+                  id: row.id,
+                  data: sortedData,
+                  row,
+                  headerId: header.id,
+                  params: header.params
+                },
+                error: isError,
+                onSelect
+              },
+              `${header.id}-${row.id}`
+            );
+          })
+        };
+      });
+      setDisplayedData(updatedData);
+    } else {
+      setDisplayedData([]);
+    }
+  }, [data, orderByState, headers]);
+  const displayedLabels = (displayedData || [])[0]?.data;
+  const renderedData = (displayedData || []).filter((_, index) => index > 0);
+  const renderedHeaders = (displayedHeaders || []).map((header) => /* @__PURE__ */ jsx(
+    DataGridHeader,
+    {
+      sort: header.sort,
+      opts: {
+        align: header.align,
+        noWrap: header.noWrap,
+        grow: header.grow,
+        isSorted: header.id === orderByState.category ? orderByState.direction : null,
+        stickyHeader: opts?.stickyHeader,
+        darkMode: opts?.darkMode
+      },
+      onClick: () => handleSort(header.id),
+      children: header.label
+    },
+    header.id
+  ));
+  return /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      headers: renderedHeaders,
+      labels: displayedLabels,
+      data: renderedData,
+      selectedId,
+      total: footers,
+      opts: {
+        ...opts,
+        ignoreTotal: !footers
+      }
+    }
+  );
+}
+
+export { B, Button, CheckboxList, ConfirmationBox, Coverflow, DataGrid, Dragger, Drawer, ExcelTable, H1, H2, H3, H4, InlinePrompt, Input_default as Input, Label, Loading, Modal, ModalContext, ModalProvider, NoData, Popover, PopoverContext, PopoverProvider, Select_default as Select, SelectInput_default as SelectInput, SortIcon, Table, Tabs, Tag, TagGroup, TagInput, Tbody, Td, Textarea_default as Textarea, Th, Thead, ThemeContext, ThemeProvider, ThemeToggle, Toggle_default as Toggle, Tr, Transition, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map