pentatrion-design 0.0.1

package/dist/index.js

@@ -0,0 +1,3707 @@
+// src/components/table/Table.tsx
+import { jsx } from "react/jsx-runtime";
+function Table({ children, ...props }) {
+  return /* @__PURE__ */ jsx("table", { className: "w-full", ...props, children });
+}
+
+// src/components/table/TableBody.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Table2({ children, ...props }) {
+  return /* @__PURE__ */ jsx2("tbody", { ...props, children });
+}
+
+// src/components/table/TableCell.tsx
+import clsx from "clsx";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Table3({ children, className, label, ...props }) {
+  return /* @__PURE__ */ jsxs("td", { className: clsx("p-2 block lg:table-cell", className), ...props, children: [
+    label && /* @__PURE__ */ jsx3("p", { className: "font-medium text-sm text-gray-6 lg:hidden", children: label }),
+    children
+  ] });
+}
+
+// src/components/table/TableHeader.tsx
+import clsx2 from "clsx";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Table4({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx4("thead", { className: clsx2("hidden lg:table-header-group", className), ...props, children });
+}
+
+// src/components/table/TableHeaderCell.tsx
+import clsx3 from "clsx";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Table5({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx5("th", { className: clsx3("text-left font-bold p-2", className), ...props, children });
+}
+
+// src/components/table/TableRow.tsx
+import clsx4 from "clsx";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Table6({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx6("tr", { className: clsx4("border-b border-gray-3 block lg:table-row", className), ...props, children });
+}
+
+// src/components/table/TableFooter.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Table7({ children, ...props }) {
+  return /* @__PURE__ */ jsx7("tfoot", { ...props, children });
+}
+
+// src/components/card/config.ts
+var cardConfig = {
+  item: "p-2 bg-gray-1 rounded-2xl",
+  group: "grid grid-cols-2 gap-4"
+};
+
+// src/components/code/Code.tsx
+import clsx5 from "clsx";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Code({ children, className }) {
+  return /* @__PURE__ */ jsx8("code", { className: clsx5("px-1 rounded m-[1px] bg-gray-1 border border-gray-2", className), children });
+}
+
+// src/components/tabs/Tabs.tsx
+import clsx6 from "clsx";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tabs({
+  className,
+  listClassName,
+  contentClassName,
+  tabs = [],
+  value,
+  onChange,
+  fullWidth = false,
+  stickyTabs = false,
+  children
+}) {
+  const content = tabs.find((t) => t.id === value)?.content;
+  return /* @__PURE__ */ jsxs2("div", { className: clsx6("ll-tabs  md:rounded-sm shadow bg-gray-2 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "tablist",
+        className: clsx6("tabs-list flex", stickyTabs && "sticky z-[1] top-0", listClassName),
+        children: [
+          tabs.map(({ title, id }) => {
+            return /* @__PURE__ */ jsx9(
+              "div",
+              {
+                className: clsx6(
+                  "tabs-list-item border-t-4 hover:text-gray-7 transition-all",
+                  fullWidth && "text-center flex-1",
+                  value === id ? "border-t-yellow-3 bg-gray-0 text-gray-7" : "border-t-transparent text-gray-6"
+                ),
+                children: /* @__PURE__ */ jsx9(
+                  "button",
+                  {
+                    className: "px-2 py-1 focus-visible:outline-offset-0 w-full",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      event.preventDefault();
+                      onChange(id);
+                    },
+                    children: title
+                  }
+                )
+              },
+              id
+            );
+          }),
+          children && /* @__PURE__ */ jsx9("div", { className: "extra ml-auto mr-2 flex items-center", children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9("div", { className: clsx6("p-2 bg-gray-0 shadow", contentClassName), children: content })
+  ] });
+}
+
+// src/components/flash/Flash.tsx
+import clsx7 from "clsx";
+
+// src/lib/tailwindVariants.ts
+var colorVariants = {
+  yellow: {
+    border: "border-yellow-3",
+    text: "text-yellow-4"
+  },
+  gray: {
+    border: "border-gray-3",
+    text: "text-gray-4"
+  },
+  red: {
+    border: "border-red-3",
+    text: "text-red-4"
+  },
+  orange: {
+    border: "border-orange-3",
+    text: "text-orange-4"
+  },
+  green: {
+    border: "border-green-3",
+    text: "text-green-4"
+  },
+  blue: {
+    border: "border-blue-3",
+    text: "text-blue-4"
+  }
+};
+
+// src/components/flash/Flash.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Alert({ color = "yellow", children, className }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: clsx7(
+        "p-2 shadow border-l-4 dark:shadow-dark",
+        colorVariants[color].border,
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/scroll/Scroll.tsx
+import { useEffect, useRef, useState } from "react";
+import clsx8 from "clsx";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var TOLERANCE = 5;
+var scrollVariants = {
+  vertical: {
+    inner: "overflow-y-auto h-full",
+    shadow: "h-1 left-0 right-0",
+    shadowStart: "top-0 bg-gradient-to-b from-gray-8/10",
+    shadowEnd: "bottom-0 bg-gradient-to-t from-gray-8/10",
+    child: ""
+  },
+  horizontal: {
+    inner: "overflow-x-auto",
+    shadow: "w-1 top-0 bottom-0",
+    shadowStart: "left-0 bg-gradient-to-r from-gray-8/10",
+    shadowEnd: "right-0 bg-gradient-to-l from-gray-8/10",
+    child: "inline-block"
+  }
+};
+function Scroll({ horizontal = false, className, children, ...rest }) {
+  const [showStartShadow, setShowStartShadow] = useState(false);
+  const [showEndShadow, setShowEndShadow] = useState(false);
+  const scrollChildRef = useRef(null);
+  const scrollContainerRef = useRef(null);
+  const position = horizontal ? "horizontal" : "vertical";
+  const setShadows = (container, child) => {
+    if (!container || !child) {
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const childRect = child.getBoundingClientRect();
+    const isOnStartEdge = horizontal ? containerRect.left - childRect.left < TOLERANCE : containerRect.top - childRect.top < TOLERANCE;
+    const isOnEndEdge = horizontal ? childRect.right - containerRect.right < TOLERANCE : childRect.bottom - containerRect.bottom < TOLERANCE;
+    setShowStartShadow(
+      (previousShowStartShadow) => isOnStartEdge === previousShowStartShadow ? !previousShowStartShadow : previousShowStartShadow
+    );
+    setShowEndShadow(
+      (previousShowEndShadow) => isOnEndEdge === previousShowEndShadow ? !previousShowEndShadow : previousShowEndShadow
+    );
+  };
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setShadows(scrollContainerRef.current, scrollChildRef.current);
+    });
+    resizeObserver.observe(scrollChildRef.current);
+    resizeObserver.observe(scrollContainerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+  function handleScroll(event) {
+    if (!scrollChildRef?.current) {
+      return;
+    }
+    setShadows(event.currentTarget, scrollChildRef.current);
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: clsx8("ll-scroll-zone", "relative", className), ...rest, children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: clsx8(
+          "scroll-shadow z-[1] absolute opacity-0 transition-all",
+          scrollVariants[position].shadow,
+          scrollVariants[position].shadowStart,
+          showStartShadow && "opacity-100"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: clsx8(
+          "scroll-shadow z-[1] absolute opacity-0 transition-all",
+          scrollVariants[position].shadow,
+          scrollVariants[position].shadowEnd,
+          showEndShadow && "opacity-100"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: scrollVariants[position].inner,
+        ref: scrollContainerRef,
+        onScroll: handleScroll,
+        children: /* @__PURE__ */ jsx11("div", { className: scrollVariants[position].child, ref: scrollChildRef, children })
+      }
+    )
+  ] });
+}
+
+// src/components/loader/Loader.tsx
+import { useId } from "react";
+import clsx9 from "clsx";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeConfig = {
+  small: "w-6 h-6 text-base",
+  medium: "w-8 h-8 text-[2rem]",
+  large: "w-12 h-12 text-[3rem]"
+};
+var trackStyle = {
+  strokeLinecap: "round",
+  strokeWidth: 2
+};
+var circleStyle = {
+  strokeLinecap: "round",
+  strokeWidth: 2,
+  /**
+   * $total-length: 43.699; // total length of path, calculated by getTotalLength() in JS
+   * $looping-percent: 40;
+   * $looping-length: math.div($looping-percent * $total-length, 100) = 17.464;
+   * stroke-dasharray: #{$looping-length * 1px}, #{($total-length - $looping-length) * 1px};
+   */
+  strokeDasharray: "17.45px, 26.21px"
+};
+function Loader({ size: size4 = "medium", color = "blue", className, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      className: clsx9("inline-block", sizeConfig[size4], colorVariants[color].text, className),
+      viewBox: "0 0 16 16",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsx12("circle", { id, cx: "8", cy: "8", r: "7" }) }),
+        /* @__PURE__ */ jsx12("use", { href: `#${id}`, className: "opacity-25 fill-none stroke-current", style: trackStyle }),
+        /* @__PURE__ */ jsx12(
+          "use",
+          {
+            href: `#${id}`,
+            className: "fill-none stroke-current animate-loader-stroke",
+            style: circleStyle
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/portal/Portal.tsx
+import ReactDOM from "react-dom";
+var Portal = ({ children }) => {
+  return ReactDOM.createPortal(children, document.body);
+};
+var Portal_default = Portal;
+
+// src/components/badge/Badge.tsx
+import clsx14 from "clsx";
+
+// src/components/button/Button.tsx
+import { forwardRef, useImperativeHandle, useRef as useRef8 } from "react";
+import clsx10 from "clsx";
+
+// src/hooks/useNotifications.tsx
+import { useContext } from "react";
+
+// src/components/notification/NotificationsContext.ts
+import { createContext } from "react";
+
+// src/lib/arrUtil.ts
+function arrayEquals(a, b) {
+  return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
+}
+
+// src/lib/fetch.ts
+async function fetchAPI(urlObjOrString, enhancedOptions = {}, baseUrl, baseOptions) {
+  const { urlParams, query, body, ...rest } = enhancedOptions;
+  let options = rest;
+  let url;
+  if (urlObjOrString instanceof URL) {
+    url = urlObjOrString;
+  } else {
+    const origin = baseUrl ? new URL(baseUrl).origin : window.location.origin;
+    let prefix = baseUrl ? new URL(baseUrl).pathname : "";
+    if (prefix === "/") {
+      prefix = "";
+    }
+    url = new URL(`${prefix}${urlObjOrString}`, origin);
+  }
+  if (urlParams) {
+    for (const [name, value] of Object.entries(urlParams)) {
+      url.pathname = url.pathname.replace(`%7B${name}%7D`, value.toString());
+    }
+  }
+  if (query) {
+    for (const [name, value] of Object.entries(query)) {
+      url.searchParams.set(
+        name,
+        typeof value === "object" ? JSON.stringify(value) : value.toString()
+      );
+    }
+  }
+  if (body && typeof body !== "string" && !(body instanceof FormData)) {
+    options.headers = {
+      ...options.headers = {},
+      "Content-Type": "application/json"
+    };
+    options.body = JSON.stringify(body);
+  }
+  if (baseOptions) {
+    const { headers: baseHeaders = {}, ...baseRest } = baseOptions;
+    options = {
+      ...baseRest,
+      ...options,
+      headers: {
+        ...baseHeaders,
+        ...options.headers
+      }
+    };
+  }
+  const response = await fetch(url.toString(), options);
+  if (response.status === 204) {
+    return null;
+  }
+  const contentType = response.headers.get("content-type");
+  if (contentType?.includes("application/json") || contentType?.includes("application/geo+json")) {
+    const dataJson = await response.json();
+    if (response.ok) {
+      return dataJson;
+    }
+    let errorMessage = "request Error";
+    if (dataJson.message) {
+      errorMessage = dataJson.message;
+    }
+    if (dataJson.error?.message) {
+      errorMessage = dataJson.error?.message;
+    }
+    throw new FetchError(errorMessage, response.status, dataJson);
+  }
+  const dataText = await response.text();
+  if (response.ok) {
+    return dataText;
+  }
+  throw new FetchError(`${response.status} ${response.statusText}`, response.status, dataText);
+}
+var FetchError = class extends Error {
+  constructor(message, status, data) {
+    super(message);
+    this.status = status;
+    this.data = data;
+    this.name = "FetchError";
+  }
+};
+
+// src/lib/error.ts
+function isErrorLike(err) {
+  if (err instanceof Error) {
+    return true;
+  } else if (err.name !== void 0 && err.message !== void 0) {
+    return true;
+  }
+  return false;
+}
+function parseError(err) {
+  if (isErrorLike(err)) {
+    return [err.message || "An error occured", { color: "red" }];
+  }
+  return null;
+}
+
+// src/components/notification/NotificationsContext.ts
+function createNotificationsManager(setNotifications) {
+  let idx = 1;
+  const timeoutIds = /* @__PURE__ */ new Map();
+  const removeNotification = (id) => {
+    const timeoutId = timeoutIds.get(id);
+    if (!timeoutId) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutIds.delete(id);
+    return setNotifications((oldNotifications) => {
+      return oldNotifications.filter(({ id: otherId }) => id !== otherId);
+    });
+  };
+  const addNotification = (content = "", {
+    expiration = 5e3,
+    color = "yellow",
+    canClose = true,
+    withLoader = false
+  } = {}) => {
+    const id = (idx++).toString();
+    if (timeoutIds.has(id)) {
+      throw new Error("notification already exists");
+    }
+    setNotifications((oldNotifications) => {
+      const newNotification = {
+        id,
+        content,
+        expiration,
+        color,
+        canClose,
+        withLoader
+      };
+      return [newNotification, ...oldNotifications];
+    });
+    timeoutIds.set(
+      id,
+      expiration === -1 ? -1 : setTimeout(() => removeNotification(id), expiration)
+    );
+    return id;
+  };
+  const notifyError = (err) => {
+    const errorMessage = parseError(err);
+    if (errorMessage) {
+      addNotification(...errorMessage);
+    } else {
+      throw err;
+    }
+  };
+  return {
+    addNotification,
+    removeNotification,
+    notifyError
+  };
+}
+var NotificationsContext = createContext(
+  null
+);
+
+// src/hooks/useNotifications.tsx
+var useNotifications = () => {
+  const manager = useContext(NotificationsContext);
+  if (!manager) {
+    throw new Error("Trying to use uninitialized NotificationsContext");
+  }
+  return manager;
+};
+
+// src/hooks/useRipple.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var useRipple = (ref) => {
+  const [ripples, setRipples] = useState2([]);
+  useEffect2(() => {
+    const handlePointerDown = (e) => {
+      if (ref.current) {
+        const elem = ref.current;
+        const rect = elem.getBoundingClientRect();
+        const left = (e.clientX ?? 0) - rect.left;
+        const top = (e.clientY ?? 0) - rect.top;
+        const height = elem.clientHeight;
+        const width = elem.clientWidth;
+        const diameter = Math.max(width, height);
+        setRipples((r) => [
+          ...r,
+          {
+            top: top - diameter / 2,
+            left: left - diameter / 2,
+            height: Math.max(width, height),
+            width: Math.max(width, height)
+          }
+        ]);
+      }
+    };
+    if (ref.current) {
+      const elem = ref.current;
+      elem.addEventListener("pointerdown", handlePointerDown);
+      return () => {
+        elem.removeEventListener("pointerdown", handlePointerDown);
+      };
+    }
+  }, [ref]);
+  const [_debounced] = useDebounce(ripples, 1e3);
+  useEffect2(() => {
+    if (_debounced.length) {
+      setRipples([]);
+    }
+  }, [_debounced]);
+  return ripples?.map((style, i) => {
+    return /* @__PURE__ */ jsx13(
+      "span",
+      {
+        "data-testid": "ripple",
+        className: "animate-ripple",
+        style: {
+          ...style,
+          //should be absolutely positioned
+          position: "absolute",
+          backgroundColor: "#FFFFFF",
+          opacity: "25%",
+          transform: "scale(0)",
+          borderRadius: "50%"
+        }
+      },
+      i
+    );
+  });
+};
+
+// src/hooks/useIsMounted.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef2 } from "react";
+var useIsMounted = () => {
+  const mountedRef = useRef2(false);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return useCallback(() => {
+    return mountedRef.current;
+  }, []);
+};
+
+// src/hooks/useFetch.tsx
+import { useCallback as useCallback2 } from "react";
+var useFetch = () => {
+  const notificationManager = useNotifications();
+  const appFetch = useCallback2(
+    async (urlObjOrString, enhancedOptions = {}) => {
+      try {
+        return await fetchAPI(urlObjOrString, enhancedOptions);
+      } catch (err) {
+        notificationManager.notifyError(err);
+      }
+    },
+    [notificationManager]
+  );
+  return appFetch;
+};
+
+// src/hooks/useCombinedRefs.ts
+import { useCallback as useCallback3 } from "react";
+var useCombinedRefs = (...refs) => useCallback3(
+  (element) => refs.forEach((ref) => {
+    if (!ref) {
+      return;
+    }
+    if (typeof ref === "function") {
+      return ref(element);
+    }
+    ref.current = element;
+  }),
+  refs
+);
+
+// src/hooks/useIsClosing.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+function useIsClosing(initialValue = false, delay = 500) {
+  const [[isOpen, isClosing], setState] = useState3([initialValue, false]);
+  const isMounted = useRef3(false);
+  useEffect4(() => {
+    isMounted.current = true;
+    return () => void (isMounted.current = false);
+  }, []);
+  const setIsOpen = useCallback4(
+    (newState) => {
+      if (newState) {
+        setState([true, false]);
+      } else {
+        setState([true, true]);
+        setTimeout(() => {
+          isMounted.current && setState([false, false]);
+        }, delay);
+      }
+    },
+    [delay]
+  );
+  return { isOpen, isClosing, setIsOpen };
+}
+
+// src/hooks/usePrevious.ts
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+function usePrevious(value) {
+  const ref = useRef4();
+  useEffect5(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+// src/hooks/useEventCallback.ts
+import { useCallback as useCallback5, useRef as useRef5 } from "react";
+function useEventCallback(callback) {
+  const ref = useRef5(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  ref.current = callback;
+  return useCallback5((...args) => ref.current?.(...args), [ref]);
+}
+
+// src/hooks/useDebounce.ts
+import {
+  useCallback as useCallback6,
+  useEffect as useEffect6,
+  useRef as useRef6,
+  useState as useState4
+} from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setImmediateValue] = useState4(value);
+  useEffect6(() => {
+    const timer = setTimeout(() => setImmediateValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return [debouncedValue, setImmediateValue];
+}
+function useRefDebounce(value, delay) {
+  const debouncedValueRef = useRef6(value);
+  useEffect6(() => {
+    const timer = setTimeout(() => {
+      debouncedValueRef.current = value;
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValueRef;
+}
+function useStateDebounce(initialValue, delay) {
+  const [value, setImmediateValue] = useState4(initialValue);
+  const [debouncedValue, setDebouncedValue] = useState4(initialValue);
+  const setValue = useCallback6((value2, immediate = false) => {
+    setImmediateValue(value2);
+    if (immediate) {
+      setDebouncedValue(value2);
+    }
+  }, []);
+  useEffect6(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return [value, debouncedValue, setValue];
+}
+
+// src/hooks/useCopyToClipboard.ts
+import { useCallback as useCallback7, useState as useState5 } from "react";
+function useCopyToClipboard() {
+  const [copiedText, setCopiedText] = useState5(null);
+  const copy = useCallback7(async (text) => {
+    if (!navigator?.clipboard) {
+      console.warn("Clipboard not supported");
+      return false;
+    }
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      console.warn("Copy failed", error);
+      setCopiedText(null);
+      return false;
+    }
+  }, []);
+  return [copiedText, copy];
+}
+
+// src/hooks/useEventListener.ts
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
+
+// src/hooks/useIsomorphicLayoutEffect.ts
+import { useEffect as useEffect7, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect7;
+
+// src/hooks/useEventListener.ts
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = useRef7(handler);
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect8(() => {
+    const targetElement = element?.current ?? window;
+    if (!(targetElement && targetElement.addEventListener))
+      return;
+    const listener = (event) => {
+      savedHandler.current(event);
+    };
+    targetElement.addEventListener(eventName, listener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, listener, options);
+    };
+  }, [eventName, element, options]);
+}
+
+// src/hooks/useOnClickOutside.ts
+function useOnClickOutside(ref, handler, eventType = "mousedown", eventListenerOptions = {}) {
+  useEventListener(
+    eventType,
+    (event) => {
+      const target = event.target;
+      if (!target || !target.isConnected) {
+        return;
+      }
+      const isOutside = Array.isArray(ref) ? ref.filter((r) => Boolean(r.current)).every((r) => r.current && !r.current.contains(target)) : ref.current && !ref.current.contains(target);
+      if (isOutside) {
+        handler(event);
+      }
+    },
+    void 0,
+    eventListenerOptions
+  );
+}
+
+// src/components/button/Button.tsx
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var buttonVariants = {
+  size(icon, size4) {
+    if (size4 === "custom") {
+      return false;
+    }
+    switch (size4) {
+      case "small":
+        return clsx10(!icon && "px-2", "text-sm h-6");
+      case "medium":
+        return !icon && "px-4 h-8";
+      case "large":
+        return !icon && "px-8 h-12";
+    }
+  },
+  variant: {
+    contained(color) {
+      return clsx10(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0",
+        {
+          yellow: "text-yellow-text bg-yellow-3 hover:bg-yellow-4 active-full:bg-yellow-5 focus-visible:outline-yellow-5",
+          gray: "text-gray-text bg-gray-3 hover:bg-gray-4 active-full:bg-gray-5 focus-visible:outline-gray-5",
+          red: "text-red-text bg-red-3 hover:bg-red-4 active-full:bg-red-5 focus-visible:outline-red-5",
+          orange: "text-orange-text bg-orange-3 hover:bg-orange-4 active-full:bg-orange-5 focus-visible:outline-orange-5",
+          green: "text-green-text bg-green-3 hover:bg-green-4 active-full:bg-green-5 focus-visible:outline-green-5",
+          blue: "text-blue-text bg-blue-3 hover:bg-blue-4 active-full:bg-blue-5 focus-visible:outline-blue-5"
+        }[color]
+      );
+    },
+    light(color) {
+      return clsx10(
+        "shadow hover:shadow-md focus:shadow-md active-full:shadow-lg outline-offset-0 bg-gray-0",
+        {
+          yellow: "text-gray-text hover:text-yellow-text hover:bg-yellow-3 active-full:bg-yellow-4 dark:active-full:bg-yellow-4/50 focus-visible:outline-yellow-4",
+          gray: "text-gray-text hover:text-gray-text hover:bg-gray-3 active-full:bg-gray-4 dark:active-full:bg-gray-4/50 focus-visible:outline-gray-4",
+          red: "text-gray-text hover:text-red-text hover:bg-red-3 active-full:bg-red-4 dark:active-full:bg-red-4/50 focus-visible:outline-red-4",
+          orange: "text-gray-text hover:text-orange-text hover:bg-orange-3 active-full:bg-orange-4 dark:active-full:bg-orange-4/50 focus-visible:outline-orange-4",
+          green: "text-gray-text hover:text-green-text hover:bg-green-3 active-full:bg-green-4 dark:active-full:bg-green-4/50 focus-visible:outline-green-4",
+          blue: "text-gray-text hover:text-blue-text hover:bg-blue-3 active-full:bg-blue-4 dark:active-full:bg-blue-4/50 focus-visible:outline-blue-4"
+        }[color]
+      );
+    },
+    outlined(color) {
+      return clsx10(
+        "bg-gray-0 text-gray-7 outline outline-2 outline-offset-[-2px] focus-visible:ring-2 active-full:shadow-md",
+        {
+          yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/50 outline-yellow-5 focus-visible:ring-yellow-4",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 outline-gray-5 focus-visible:ring-gray-4",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 outline-red-5 focus-visible:ring-red-4",
+          orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 outline-orange-5 focus-visible:ring-orange-4",
+          green: "hover:bg-green-1/50 active-full:bg-green-2/50 outline-green-5 focus-visible:ring-green-4",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 outline-blue-5 focus-visible:ring-blue-4"
+        }[color]
+      );
+    },
+    text(color) {
+      return clsx10(
+        "bg-transparent active-full:shadow-sm outline-offset-0",
+        {
+          yellow: "hover:bg-yellow-1/50 active-full:bg-yellow-2/25 text-yellow-4 hover:text-yellow-5",
+          gray: "hover:bg-gray-1 active-full:bg-gray-2 text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "hover:bg-red-1/50 active-full:bg-red-2/50 text-red-4 hover:text-red-5",
+          orange: "hover:bg-orange-1/50 active-full:bg-orange-2/50 text-orange-4 hover:text-orange-5",
+          green: "hover:bg-green-1/50 active-full:bg-green-2/50 text-green-4 hover:text-green-5",
+          blue: "hover:bg-blue-1/50 active-full:bg-blue-2/50 text-blue-4 hover:text-blue-5"
+        }[color]
+      );
+    },
+    ghost(color) {
+      return clsx10(
+        "bg-transparent outline-offset-0",
+        {
+          yellow: "text-yellow-4 hover:text-yellow-5",
+          gray: "text-gray-5 hover:text-gray-6 active-full:text-gray-7",
+          red: "text-red-4 hover:text-red-5",
+          orange: "text-orange-4 hover:text-orange-5",
+          green: "text-green-4 hover:text-green-5",
+          blue: "text-blue-4 hover:text-blue-5"
+        }[color]
+      );
+    }
+  }
+};
+var Button = forwardRef(
+  ({
+    withRipple = true,
+    variant = "contained",
+    loading,
+    color = "yellow",
+    size: size4 = "medium",
+    focusable = true,
+    fullWidth,
+    className,
+    disabled,
+    children,
+    selected = false,
+    icon = false,
+    ...props
+  }, ref) => {
+    const inputRef = useRef8(null);
+    useImperativeHandle(
+      ref,
+      () => inputRef.current
+    );
+    const notClickable = loading || disabled;
+    const ripples = useRipple(inputRef);
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        tabIndex: focusable ? 0 : -1,
+        role: "button",
+        ref: inputRef,
+        className: clsx10(
+          "rounded-2xl cursor-pointer relative overflow-clip focus-visible:outline focus-visible:outline-2 no-underline border-0 inline-flex items-center transition-color-shadow duration-300 leading-5",
+          className,
+          buttonVariants.size(icon, size4),
+          buttonVariants.variant[variant](color),
+          icon && "justify-center min-w-8 h-8 [&_i]:w-8 [&_:last-child:not(i,img)]:pr-4",
+          fullWidth && "w-full",
+          selected && "active",
+          notClickable && "disabled"
+        ),
+        "data-variant": variant,
+        disabled,
+        "aria-busy": loading,
+        ...props,
+        children: [
+          !notClickable && withRipple && ripples,
+          children,
+          loading !== void 0 && /* @__PURE__ */ jsx14("span", { className: "", children: /* @__PURE__ */ jsx14(
+            Loader,
+            {
+              color,
+              size: "small",
+              className: clsx10("ml-2 -mr-2", !loading && "invisible")
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+var Button_default = Button;
+
+// src/components/href/Href.tsx
+import { forwardRef as forwardRef2 } from "react";
+import clsx11 from "clsx";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Href = forwardRef2(
+  ({ href = "#", ghost = false, children, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx15("a", { ref, href, className: clsx11(ghost && "ghost-link", className), ...rest, children });
+  }
+);
+var Href_default = Href;
+
+// src/components/tooltip/useTooltip.ts
+import { useMemo, useRef as useRef9, useState as useState6 } from "react";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  hide,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole
+} from "@floating-ui/react";
+var arrowWidth = 16;
+function useTooltip({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  openDelay = 500,
+  closeDelay = 500,
+  color = "yellow"
+} = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState6(initialOpen);
+  const isUncontrolled = controlledOpen === null || controlledOpen === void 0;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;
+  const arrowRef = useRef9(null);
+  const offsetVal = arrowWidth / 2;
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetVal),
+      flip(),
+      shift({ padding: 5 }),
+      arrow({
+        element: arrowRef,
+        padding: 12
+      }),
+      hide({
+        padding: 20
+      })
+    ]
+  });
+  const { context } = data;
+  const hover = useHover(context, {
+    move: false,
+    enabled: isUncontrolled,
+    delay: {
+      open: openDelay || 1,
+      close: closeDelay
+    }
+  });
+  const focus = useFocus(context, {
+    enabled: isUncontrolled
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+  return useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      arrowRef,
+      color
+    }),
+    [open, setOpen, color, interactions, data]
+  );
+}
+
+// src/components/tooltip/useTooltipContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var TooltipContext = createContext2(null);
+function useTooltipContext() {
+  const context = useContext2(TooltipContext);
+  if (context === null) {
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  }
+  return context;
+}
+
+// src/components/tooltip/Tooltip.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Tooltip({ children, ...options }) {
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ jsx16(TooltipContext.Provider, { value: tooltip, children });
+}
+
+// src/components/tooltip/TooltipContent.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { FloatingPortal, useMergeRefs } from "@floating-ui/react";
+import clsx13 from "clsx";
+
+// src/components/dialog/util.ts
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function computeArrowStyle({ middlewareData, placement }) {
+  if (!middlewareData.arrow) {
+    return {
+      display: "none"
+    };
+  }
+  const { x, y } = middlewareData.arrow;
+  const staticSide = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  }[getSide(placement)];
+  return {
+    left: x != null ? `${x}px` : "",
+    top: y != null ? `${y}px` : "",
+    [staticSide]: "-6px"
+  };
+}
+
+// src/components/dialog/Dialog.tsx
+import clsx12 from "clsx";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var dialogVariants = {
+  color(color) {
+    if (!color) {
+      return "bg-gray-0";
+    }
+    return clsx12(
+      "border-t-4",
+      {
+        yellow: "border-t-yellow-3 bg-gray-0",
+        gray: "border-t-gray-3 bg-gray-0",
+        red: "border-t-red-3 bg-red-1",
+        blue: "border-t-blue-3 bg-blue-1",
+        green: "border-t-green-3 bg-green-1",
+        orange: "border-t-orange-3 bg-orange-1"
+      }[color]
+    );
+  }
+};
+function Dialog({ placement, color, children, className, ...rest }) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: clsx12(
+        "rounded-2xl relative shadow dark:shadow-dark",
+        dialogVariants.color(color),
+        className
+      ),
+      "data-placement": placement,
+      "data-color": color,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/tooltip/TooltipContent.tsx
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+var TooltipContent = forwardRef3(
+  ({ style, children, className, ...props }, propRef) => {
+    const context = useTooltipContext();
+    const ref = useMergeRefs([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx18(FloatingPortal, { children: /* @__PURE__ */ jsx18(
+      "div",
+      {
+        ref,
+        className: clsx13("z-tooltip", context.middlewareData.hide?.referenceHidden && "invisible"),
+        style: { ...context.floatingStyles, ...style },
+        ...context.getFloatingProps(props),
+        children: /* @__PURE__ */ jsxs6(
+          Dialog,
+          {
+            placement: context.placement,
+            className: clsx13("animate-fade-in px-2 py-1 max-w-80 text-sm", className),
+            color: context.color,
+            children: [
+              children,
+              /* @__PURE__ */ jsx18(
+                "div",
+                {
+                  ref: context.arrowRef,
+                  style: computeArrowStyle(context),
+                  className: "p8n-arrow"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+var TooltipContent_default = TooltipContent;
+
+// src/components/tooltip/TooltipTrigger.tsx
+import { cloneElement, forwardRef as forwardRef4, isValidElement } from "react";
+import { useMergeRefs as useMergeRefs2 } from "@floating-ui/react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TooltipTrigger = forwardRef4(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useTooltipContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs2([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && isValidElement(children)) {
+      return cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          "data-state": context.open ? "open" : "closed"
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx19("abbr", { ref, ...context.getReferenceProps(props), children });
+  }
+);
+var TooltipTrigger_default = TooltipTrigger;
+
+// src/components/tooltip/SimpleTooltip.tsx
+import { isValidElement as isValidElement2 } from "react";
+import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+function SimpleTooltip({ content, children, contentClassName, ...options }) {
+  return /* @__PURE__ */ jsxs7(Tooltip, { ...options, children: [
+    /* @__PURE__ */ jsx20(TooltipContent_default, { className: contentClassName, children: content }),
+    /* @__PURE__ */ jsx20(TooltipTrigger_default, { asChild: isValidElement2(children), children })
+  ] });
+}
+
+// src/components/badge/Badge.tsx
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+function Badge({
+  children,
+  className,
+  onRemove,
+  onClick,
+  tooltip,
+  url,
+  color = "yellow"
+}) {
+  const badge = /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      className: clsx14(
+        "ll-badge",
+        "text-xs rounded-full w-fit shadow overflow-hidden inline-flex items-stretch",
+        buttonVariants.variant.contained(color),
+        // badgeVariants.color[color],
+        // `variant-solid-${color}`,
+        // `text-${color}-4`,
+        className
+      ),
+      children: [
+        onClick ? /* @__PURE__ */ jsx21("button", { className: "px-2", onClick, children }) : /* @__PURE__ */ jsx21("span", { className: "px-2", children }),
+        onRemove && /* @__PURE__ */ jsx21("button", { className: "remove rounded-r-full pr-1 pl-0.5", onClick: onRemove, children: /* @__PURE__ */ jsx21("i", { className: "fe-cancel" }) })
+      ]
+    }
+  );
+  const wrappedBadge = url ? /* @__PURE__ */ jsx21(Href_default, { href: url, ghost: true, children: badge }) : badge;
+  if (!tooltip) {
+    return wrappedBadge;
+  }
+  return /* @__PURE__ */ jsxs8(Tooltip, { children: [
+    /* @__PURE__ */ jsx21(TooltipContent_default, { children: tooltip }),
+    /* @__PURE__ */ jsx21(TooltipTrigger_default, { asChild: true, children: wrappedBadge })
+  ] });
+}
+
+// src/components/highlight/Highlight.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Hightlight({ value, indices, minLength = 2 }) {
+  if (!indices || !value) {
+    return value;
+  }
+  const content = [];
+  let lastIndex = 0;
+  indices.forEach((indice) => {
+    if (indice[1] - indice[0] < minLength) {
+      return;
+    }
+    if (indice[0] - lastIndex > 0) {
+      content.push(value.substring(lastIndex, indice[0]));
+    }
+    content.push(/* @__PURE__ */ jsx22("mark", { children: value.substring(indice[0], indice[1] + 1) }, content.length));
+    lastIndex = indice[1] + 1;
+  });
+  if (lastIndex <= value.length) {
+    content.push(value.substring(lastIndex));
+  }
+  return /* @__PURE__ */ jsx22("span", { className: "text-gray-6", children: content });
+}
+
+// src/components/input-field/InputField.tsx
+import { forwardRef as forwardRef9, useId as useId3 } from "react";
+
+// src/components/input/Input.tsx
+import { forwardRef as forwardRef5 } from "react";
+import clsx15 from "clsx";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+var inputConfig = {
+  container: "p8n-input-text rounded-2xl outline-offset-[-1px] flex ",
+  input: "h-8 flex-1 appearance-none outline-none filter-none min-w-0 bg-transparent"
+};
+var Input = forwardRef5(
+  ({ variant = "normal", color = "yellow", disabled = false, prefix, suffix, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        "data-color": color,
+        "data-variant": variant,
+        className: clsx15(inputConfig.container, disabled && "disabled", className),
+        children: [
+          prefix && /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: clsx15([
+                "flex-center relative",
+                typeof prefix === "string" && "mx-2 select-none text-gray-6"
+              ]),
+              children: prefix
+            }
+          ),
+          /* @__PURE__ */ jsx23(
+            "input",
+            {
+              ref,
+              className: clsx15(inputConfig.input, !prefix && "pl-4", !suffix && "pr-4"),
+              ...rest,
+              disabled
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: clsx15([
+                "flex-center relative",
+                typeof suffix === "string" && "mx-2 select-none text-gray-6"
+              ]),
+              children: suffix
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var Input_default = Input;
+
+// src/components/input/Checkbox.tsx
+import { forwardRef as forwardRef6, useRef as useRef10 } from "react";
+import clsx16 from "clsx";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+var Checkbox = forwardRef6(
+  ({ color = "yellow", indeterminate, disabled = false, checked, className, children, ...rest }, ref) => {
+    const inputRef = useRef10(null);
+    const combinedRef = useCombinedRefs(inputRef, ref);
+    return /* @__PURE__ */ jsxs10("label", { className: clsx16("flex items-center cursor-pointer", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx24(
+        "input",
+        {
+          "data-color": color,
+          ref: combinedRef,
+          disabled,
+          type: "checkbox",
+          className: clsx16(
+            "p8n-input-checkbox",
+            "appearance-none p-0 inline-block bg-origin-border select-none shrink-0 h-5 w-5 bg-gray-0 my-0 mr-1 rounded",
+            indeterminate && "indeterminate",
+            className
+          ),
+          checked,
+          ...rest
+        }
+      ),
+      children
+    ] });
+  }
+);
+var Checkbox_default = Checkbox;
+
+// src/components/input/RadioGroup.tsx
+import { forwardRef as forwardRef7, useId as useId2, useRef as useRef11 } from "react";
+import clsx17 from "clsx";
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var Radio = forwardRef7(
+  ({ disabled = false, color = "yellow", checked, children, name, className, ...rest }, ref) => {
+    const inputRef = useRef11(null);
+    const combinedRef = useCombinedRefs(inputRef, ref);
+    return /* @__PURE__ */ jsxs11("label", { className: clsx17("flex items-center cursor-pointer", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx25(
+        "input",
+        {
+          "data-color": color,
+          ref: combinedRef,
+          disabled,
+          type: "radio",
+          className: clsx17(
+            "p8n-input-radio",
+            "appearance-none p-0 inline-block bg-origin-border select-none shrink-0 cursor-pointer h-5 w-5 bg-gray-0 my-0 mr-1 rounded-full",
+            className
+          ),
+          checked,
+          name,
+          ...rest
+        }
+      ),
+      children
+    ] });
+  }
+);
+var placementVariants = {
+  inline: "flex gap-2",
+  "inline-grid": "grid gap-2 grid-cols-repeat-fill-160",
+  block: ""
+};
+function RadioGroup({
+  value,
+  options,
+  onChange = () => {
+  },
+  // onValue = () => {},
+  placement = "block",
+  disabled = false,
+  className,
+  color = "yellow"
+}) {
+  const id = useId2();
+  return /* @__PURE__ */ jsx25("div", { className: clsx17(placementVariants[placement]), children: options.map((option) => /* @__PURE__ */ jsx25(
+    Radio,
+    {
+      disabled,
+      checked: option.value === value,
+      onChange: () => onChange(option.value),
+      name: id,
+      className,
+      color,
+      children: option.label
+    },
+    option.value
+  )) });
+}
+
+// src/components/input/Toggle.tsx
+import { forwardRef as forwardRef8, useRef as useRef12 } from "react";
+import clsx18 from "clsx";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var Toggle = forwardRef8(
+  ({ color = "yellow", disabled = false, checked, className, children, ...rest }, ref) => {
+    const inputRef = useRef12(null);
+    const combinedRef = useCombinedRefs(inputRef, ref);
+    return /* @__PURE__ */ jsxs12("label", { className: clsx18("cursor-pointer flex items-center", disabled && "disabled"), children: [
+      /* @__PURE__ */ jsx26(
+        "input",
+        {
+          "data-color": color,
+          ref: combinedRef,
+          disabled,
+          type: "checkbox",
+          className: clsx18(
+            "p8n-input-checkbox p8n-input-toggle ll-toggle w-[30px] h-[18px] box-border appearance-none rounded-xl inline-block relative mr-1 bg-gray-1 checked:bg-gray-0 after:absolute after:top-[3px] after:left-[3px] after:rounded-full after:w-[12px] after:h-[12px] after:bg-gray-2 after:outline after:outline-1 after:outline-gray-3 checked:after:bg-current checked:after:translate-x-[12px] checked:after:outline-current after:transition-all",
+            className
+          ),
+          checked,
+          ...rest
+        }
+      ),
+      children
+    ] });
+  }
+);
+var Toggle_default = Toggle;
+
+// src/components/input-field/InputField.tsx
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+var defaultElement = Input_default;
+var InputFieldBase = ({ label, hint, help, error, warning, as, ...rest }, ref) => {
+  const id = useId3();
+  const Element = as || defaultElement;
+  const labelElement = label && /* @__PURE__ */ jsx27("span", { className: "font-bold", children: label });
+  const hintElement = hint && /* @__PURE__ */ jsx27("span", { className: "ml-auto text-gray-6 text-sm", children: hint });
+  const errorElement = error && typeof error !== "boolean" && /* @__PURE__ */ jsxs13("span", { className: "text-red-4 font-medium", children: [
+    /* @__PURE__ */ jsx27("i", { className: "fe-circle-exclamation" }),
+    /* @__PURE__ */ jsx27("span", { children: error })
+  ] });
+  const warningElement = warning && typeof warning !== "boolean" && /* @__PURE__ */ jsxs13("span", { className: "text-orange-4 font-medium", children: [
+    /* @__PURE__ */ jsx27("i", { className: "fe-circle-exclamation" }),
+    /* @__PURE__ */ jsx27("span", { children: warning })
+  ] });
+  const color = error ? "red" : warning ? "orange" : "yellow";
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    label || hint ? /* @__PURE__ */ jsxs13("label", { className: "flex items-end mb-1", htmlFor: id, children: [
+      labelElement,
+      hintElement
+    ] }) : /* @__PURE__ */ jsx27("label", { htmlFor: id, className: "invisible" }),
+    /* @__PURE__ */ jsx27(Element, { ref, id, color, ...rest }),
+    /* @__PURE__ */ jsx27("div", { className: "text-gray-6 text-sm mt-1", children: errorElement || warningElement || help })
+  ] });
+};
+InputFieldBase.displayName = "InputField";
+var InputField = forwardRef9(InputFieldBase);
+var InputField_default = InputField;
+
+// src/components/resize-area/ResizeArea.tsx
+import { useCallback as useCallback8, useEffect as useEffect9 } from "react";
+import clsx19 from "clsx";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function ResizeArea({ name, position, initialValue }) {
+  useEffect9(() => {
+    const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+    if (initialValue) {
+      document.documentElement.style.setProperty(cssVarName, `${initialValue}px`);
+    }
+  }, []);
+  useEffect9(() => {
+    const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+    return () => {
+      document.documentElement.style.removeProperty(cssVarName);
+    };
+  }, [name, position]);
+  const handlePointerMove = useCallback8(
+    (e) => {
+      const cssVarName = `--sidebar-${name}-${["top", "bottom"].includes(position) ? "height" : "width"}`;
+      let cssVarValue;
+      switch (position) {
+        case "top":
+          cssVarValue = document.documentElement.clientHeight - e.pageY;
+          break;
+        case "right":
+          cssVarValue = e.pageX;
+          break;
+        case "left":
+          cssVarValue = document.documentElement.clientWidth - e.pageX;
+          break;
+        case "bottom":
+          cssVarValue = e.pageY;
+          break;
+      }
+      document.documentElement.style.setProperty(cssVarName, `${cssVarValue}px`);
+      return () => {
+        document.documentElement.style.removeProperty(cssVarName);
+      };
+    },
+    [name, position]
+  );
+  const handlePointerUp = useCallback8(() => {
+    const handler = handlePointerMove;
+    document.removeEventListener("pointermove", handler);
+    document.documentElement.classList.remove("cursor-row-resize", "cursor-col-resize");
+    return () => {
+      document.removeEventListener("pointermove", handler);
+    };
+  }, [handlePointerMove]);
+  function handlePointerDown() {
+    document.addEventListener("pointerup", handlePointerUp, { once: true });
+    document.addEventListener("pointermove", handlePointerMove);
+    if (["top", "bottom"].includes(position)) {
+      document.documentElement.classList.add(`cursor-row-resize`);
+    } else {
+      document.documentElement.classList.add(`cursor-col-resize`);
+    }
+  }
+  return /* @__PURE__ */ jsx28("div", { className: clsx19(["p8n-resize-area", position]), children: /* @__PURE__ */ jsx28("button", { className: "area-button", type: "button", onPointerDown: handlePointerDown }) });
+}
+
+// src/components/snack/Snack.tsx
+import clsx21 from "clsx";
+import { useEffect as useEffect10 } from "react";
+
+// src/components/button/ButtonGroup.tsx
+import clsx20 from "clsx";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var buttonGroupVariants = {
+  horizontal: "[&_:not(:first-child)]:rounded-bl-none [&_:not(:last-child)]:rounded-tr-none [&_[data-variant='outlined']]:-mx-[1px]",
+  vertical: "flex flex-col [&_:not(:first-child)]:rounded-tr-none [&_:not(:last-child)]:rounded-bl-none [&_[data-variant='outlined']]:-my-[1px]"
+};
+function ButtonGroup({ children, className, direction = "horizontal" }) {
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: clsx20(
+        "ll-button-group [&_:not(:first-child)]:rounded-tl-none [&_:not(:last-child)]:rounded-br-none",
+        buttonGroupVariants[direction],
+        `direction-${direction}`,
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/snack/Snack.tsx
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+function Snack({
+  expiration = 5e3,
+  content = "",
+  color = "yellow",
+  withLoader = false,
+  canClose = false,
+  onRemove = () => {
+  }
+}) {
+  const onRemoveStable = useEventCallback(onRemove);
+  useEffect10(() => {
+    if (expiration === -1) {
+      return;
+    }
+    const timeoutId = setTimeout(() => onRemoveStable(), expiration);
+    return () => void clearTimeout(timeoutId);
+  }, [onRemoveStable, expiration]);
+  return /* @__PURE__ */ jsx30(Dialog, { className: clsx21("animate-fade-in", "ll-snack"), placement: "top", color, children: /* @__PURE__ */ jsxs14("div", { className: "w-fit min-w-60 px-2 py-1 flex items-center", children: [
+    /* @__PURE__ */ jsx30("span", { className: "pr-4 flex-1", children: content }),
+    withLoader && /* @__PURE__ */ jsx30(Loader, { size: "small", color: "gray" }),
+    canClose && /* @__PURE__ */ jsx30(Button_default, { icon: true, variant: "text", color: "gray", onClick: onRemove, children: /* @__PURE__ */ jsx30("i", { className: "fe-cancel" }) })
+  ] }) });
+}
+
+// src/components/autocomplete/Autocomplete.tsx
+import {
+  useCallback as useCallback9,
+  useMemo as useMemo2,
+  useRef as useRef13,
+  useState as useState7,
+  forwardRef as forwardRef10
+} from "react";
+
+// src/components/autocomplete/AutocompleteOption.tsx
+import { memo, useId as useId4 } from "react";
+import { useListItem } from "@floating-ui/react";
+
+// src/components/autocomplete/useAutocompleteContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var AutocompleteContext = createContext3(null);
+function useAutocomplete() {
+  const context = useContext3(AutocompleteContext);
+  if (context === null) {
+    throw new Error("Autocomplete components must be wrapped in <Autocomplete>");
+  }
+  return context;
+}
+
+// src/components/autocomplete/AutocompleteOption.tsx
+import clsx22 from "clsx";
+
+// src/components/autocomplete/util.ts
+function getOptionLabel(option) {
+  switch (option.type) {
+    case "Feature":
+      return option.properties.label;
+    default:
+      return option.label;
+  }
+}
+function getOptionValue(option) {
+  switch (option.type) {
+    case "Feature":
+      return option.properties.id;
+    default:
+      return option.value;
+  }
+}
+
+// src/components/autocomplete/AutocompleteOption.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function AutocompleteOption(props) {
+  const label = getOptionLabel(props);
+  const id = useId4();
+  const { activeIndex, selection, getItemProps, handleSelect } = useAutocomplete();
+  const { ref, index } = useListItem({ label });
+  const isActive = activeIndex === index;
+  const isSelected = selection ? getOptionValue(selection) === getOptionValue(props) : false;
+  return /* @__PURE__ */ jsx31(
+    "div",
+    {
+      className: clsx22("option", isSelected && "bg-gray-2", isActive && "bg-gray-1"),
+      ref,
+      role: "option",
+      id,
+      "aria-selected": isActive,
+      ...getItemProps({
+        onClick: () => handleSelect(index)
+      }),
+      children: label
+    }
+  );
+}
+var AutocompleteOption_default = memo(AutocompleteOption);
+
+// src/components/autocomplete/Autocomplete.tsx
+import {
+  FloatingFocusManager,
+  FloatingList,
+  FloatingPortal as FloatingPortal2,
+  autoUpdate as autoUpdate2,
+  flip as flip2,
+  offset as offset2,
+  size,
+  useDismiss as useDismiss2,
+  useFloating as useFloating2,
+  useInteractions as useInteractions2,
+  useListNavigation,
+  useRole as useRole2
+} from "@floating-ui/react";
+import clsx23 from "clsx";
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { createElement } from "react";
+function Autocomplete({
+  className,
+  icon = true,
+  color = "yellow",
+  selectionSuffix,
+  noSearchSuffix,
+  placement = "bottom",
+  placeholder = "Search...",
+  selection = null,
+  onChangeSelection,
+  autocompleteOptionComponent,
+  loading = false,
+  clearSearchButton = false,
+  searchValue,
+  onChangeSearchValue,
+  options,
+  selectOnFocus = true
+}, inputRef) {
+  const [isOpen, setIsOpen] = useState7(false);
+  const [activeIndex, setActiveIndex] = useState7(null);
+  const onChangeSearchValueStable = useEventCallback(onChangeSearchValue);
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+  const OptionComponent = autocompleteOptionComponent ?? AutocompleteOption_default;
+  const listRef = useRef13([]);
+  const { refs, floatingStyles, context } = useFloating2({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate2,
+    middleware: [
+      offset2(5),
+      flip2({ padding: 10 }),
+      size({
+        apply({ rects, elements, availableHeight }) {
+          Object.assign(elements.floating.style, {
+            width: `${Math.max(130, rects.reference.width)}px`
+          });
+          const firstChild = elements.floating.firstElementChild;
+          if (firstChild) {
+            firstChild.style.maxHeight = `${Math.min(availableHeight, 288)}px`;
+          }
+        },
+        padding: 10
+      })
+    ]
+  });
+  const role = useRole2(context, { role: "listbox" });
+  const dismiss = useDismiss2(context);
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    /* we want the real focus to stay on the input, so focus associated to active items is simulated */
+    virtual: true,
+    loop: true
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions2([
+    role,
+    dismiss,
+    listNav
+  ]);
+  function handleChangeSearchValue(e) {
+    const value = e.target.value;
+    onChangeSearchValueStable(value, false);
+    if (value !== searchValue && selection !== null) {
+      onChangeSelectionStable(null);
+      setActiveIndex(null);
+      return;
+    }
+    if (value) {
+      setIsOpen(true);
+      setActiveIndex(listRef.current[0] ? 0 : null);
+    } else {
+      setIsOpen(false);
+      setActiveIndex(null);
+    }
+  }
+  const handleSelect = useCallback9(
+    (index) => {
+      if (index === null) {
+        onChangeSelectionStable(null);
+      } else if (options[index]) {
+        const newSelection = options[index];
+        onChangeSelectionStable(newSelection);
+        onChangeSearchValueStable(getOptionLabel(newSelection), true);
+      }
+      setActiveIndex(null);
+      setIsOpen(false);
+    },
+    [options, onChangeSelectionStable, onChangeSearchValueStable]
+  );
+  const autocompleteContext = useMemo2(
+    () => ({
+      activeIndex,
+      selection,
+      getItemProps,
+      handleSelect
+    }),
+    [activeIndex, selection, getItemProps, handleSelect]
+  );
+  return /* @__PURE__ */ jsxs15("div", { className, children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx23(inputConfig.container), ref: refs.setReference, "data-color": color, children: [
+      icon !== false && /* @__PURE__ */ jsxs15("div", { className: "flex-center relative", children: [
+        loading && /* @__PURE__ */ jsx32(Loader, { size: "medium", color: "gray", className: "absolute top-0 left-0" }),
+        icon === true ? /* @__PURE__ */ jsx32("span", { className: "w-8 h-8 flex-center", children: /* @__PURE__ */ jsx32("i", { className: "fe-search" }) }) : icon
+      ] }),
+      /* @__PURE__ */ jsx32(
+        "input",
+        {
+          spellCheck: "false",
+          className: clsx23(inputConfig.input, icon === false && "pl-4"),
+          ref: inputRef,
+          type: "search",
+          value: searchValue,
+          placeholder,
+          "aria-autocomplete": "list",
+          ...getReferenceProps({
+            onFocus() {
+              if (selectOnFocus) {
+                document.activeElement?.select();
+              }
+            },
+            onChange: handleChangeSearchValue,
+            onMouseDown() {
+              if (options.length === 0) {
+                return;
+              }
+              setIsOpen((isOpen2) => !isOpen2);
+            },
+            onKeyDown(e) {
+              if (e.key === "Enter" && activeIndex != null) {
+                handleSelect(activeIndex);
+              }
+            }
+          })
+        }
+      ),
+      /* @__PURE__ */ jsxs15("div", { className: "flex-center relative", children: [
+        selection && selectionSuffix,
+        clearSearchButton && (searchValue.trim() !== "" || selection !== null) && /* @__PURE__ */ jsx32(
+          Button_default,
+          {
+            withRipple: false,
+            icon: true,
+            color: "gray",
+            variant: "text",
+            onClick: () => {
+              setIsOpen(false);
+              onChangeSelectionStable(null);
+              setActiveIndex(null);
+              onChangeSearchValueStable("", true);
+            },
+            children: /* @__PURE__ */ jsx32("i", { className: "fe-cancel" })
+          }
+        ),
+        icon === false && loading && /* @__PURE__ */ jsx32(Loader, { size: "medium", color: "gray" }),
+        !selection && searchValue === "" && noSearchSuffix
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx32(FloatingPortal2, { children: /* @__PURE__ */ jsx32(AutocompleteContext.Provider, { value: autocompleteContext, children: isOpen && /* @__PURE__ */ jsx32(
+      FloatingFocusManager,
+      {
+        disabled: selectOnFocus,
+        context,
+        initialFocus: -1,
+        visuallyHiddenDismiss: true,
+        children: /* @__PURE__ */ jsx32(
+          "div",
+          {
+            className: "z-dialog",
+            ref: refs.setFloating,
+            style: floatingStyles,
+            ...getFloatingProps(),
+            children: /* @__PURE__ */ jsx32(
+              Dialog,
+              {
+                placement: context.placement,
+                className: "animate-fade-in-list overflow-auto",
+                children: /* @__PURE__ */ jsx32(FloatingList, { elementsRef: listRef, children: options.map((option) => {
+                  return /* @__PURE__ */ createElement(OptionComponent, { ...option, key: getOptionValue(option) });
+                }) })
+              }
+            )
+          }
+        )
+      }
+    ) }) })
+  ] });
+}
+var Autocomplete_default = forwardRef10(Autocomplete);
+
+// src/components/autocomplete/SimpleAutocomplete.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef14, useState as useState8 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function SimpleAutocomplete({
+  options,
+  selection = null,
+  onChangeSelection,
+  ...rest
+}) {
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+  const [searchValue, setSearchValue] = useState8(selection ? getOptionLabel(selection) : "");
+  const searchValueRef = useRef14(searchValue);
+  searchValueRef.current = searchValue;
+  const inputRef = useRef14(null);
+  useLayoutEffect2(() => {
+    if (selection === null) {
+      if (document.activeElement !== inputRef.current) {
+        setSearchValue("");
+      }
+      return;
+    }
+    const selectionLabel = getOptionLabel(selection);
+    if (searchValueRef.current !== getOptionLabel(selection)) {
+      setSearchValue(selectionLabel);
+    }
+  }, [selection, setSearchValue]);
+  const filteredOptions = selection !== null ? [] : options.filter((option) => {
+    const optionLabel = getOptionLabel(option);
+    return optionLabel.toLowerCase().startsWith(searchValue.toLowerCase());
+  });
+  return /* @__PURE__ */ jsx33(
+    Autocomplete_default,
+    {
+      ref: inputRef,
+      searchValue,
+      onChangeSearchValue: setSearchValue,
+      selection,
+      onChangeSelection: onChangeSelectionStable,
+      options: filteredOptions,
+      ...rest
+    }
+  );
+}
+
+// src/components/autocomplete/LazyAutocomplete.tsx
+import { useCallback as useCallback10, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef15, useState as useState9 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+function LazyAutocomplete({
+  onChangeSearchValueCallback,
+  debounce = 500,
+  selection = null,
+  onChangeSelection,
+  ...rest
+}) {
+  const onChangeSelectionStable = useEventCallback(onChangeSelection);
+  const [searchValue, searchValueDebounced, setSearchValue] = useStateDebounce(
+    selection ? getOptionLabel(selection) : "",
+    debounce
+  );
+  const searchValueRef = useRef15(searchValue);
+  searchValueRef.current = searchValue;
+  const inputRef = useRef15(null);
+  const [loading, setLoading] = useState9(false);
+  const [options, setOptions] = useState9([]);
+  const handleChangeSelection = useCallback10(
+    (selection2) => {
+      onChangeSelectionStable(selection2);
+      if (selection2) {
+        setOptions([]);
+      }
+    },
+    [onChangeSelectionStable]
+  );
+  useLayoutEffect3(() => {
+    if (selection === null) {
+      if (document.activeElement !== inputRef.current) {
+        setSearchValue("");
+      }
+      return;
+    }
+    const selectionLabel = getOptionLabel(selection);
+    if (searchValueRef.current !== selectionLabel) {
+      setSearchValue(selectionLabel, true);
+    }
+  }, [selection, setSearchValue]);
+  useEffect11(() => {
+    let abort = false;
+    if (selection) {
+      return;
+    }
+    if (searchValueDebounced.trim() === "") {
+      setOptions([]);
+      return;
+    }
+    setLoading(true);
+    onChangeSearchValueCallback(searchValueDebounced).then((newOptions) => {
+      setLoading(false);
+      if (!abort) {
+        setOptions(newOptions);
+      }
+    }).catch(() => {
+      setLoading(false);
+    });
+    return () => {
+      setLoading(false);
+      abort = true;
+    };
+  }, [selection, searchValueDebounced, onChangeSearchValueCallback]);
+  return /* @__PURE__ */ jsx34(
+    Autocomplete_default,
+    {
+      ref: inputRef,
+      searchValue,
+      onChangeSearchValue: (newValue, immediate) => {
+        setSearchValue(newValue, immediate || newValue === "" ? true : false);
+      },
+      selection,
+      onChangeSelection: handleChangeSelection,
+      options,
+      loading,
+      ...rest
+    }
+  );
+}
+
+// src/components/context-menu/ContextMenu.tsx
+import {
+  Children,
+  cloneElement as cloneElement2,
+  isValidElement as isValidElement3,
+  useEffect as useEffect12,
+  useRef as useRef16,
+  useState as useState10
+} from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager2,
+  FloatingPortal as FloatingPortal3,
+  autoUpdate as autoUpdate3,
+  flip as flip3,
+  offset as offset3,
+  shift as shift2,
+  size as size2,
+  useDismiss as useDismiss3,
+  useFloating as useFloating3,
+  useInteractions as useInteractions3,
+  useListNavigation as useListNavigation2,
+  useRole as useRole3,
+  useTypeahead
+} from "@floating-ui/react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function ContextMenu({ children, style, eventName = "contextmenu" }) {
+  const [activeIndex, setActiveIndex] = useState10(null);
+  const [isOpen, setIsOpen] = useState10(false);
+  const isOpenDebounceRef = useRefDebounce(isOpen, 500);
+  const contextEvent = useRef16(null);
+  const listItemsRef = useRef16([]);
+  const listContentRef = useRef16(
+    Children.map(
+      children,
+      (child) => isValidElement3(child) ? child.props.label : null
+    )
+  );
+  const { refs, floatingStyles, context } = useFloating3({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      offset3({ mainAxis: 5, alignmentAxis: 4 }),
+      flip3(),
+      size2({
+        apply({ elements, availableHeight }) {
+          const firstChild = elements.floating.firstElementChild;
+          if (firstChild) {
+            firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;
+          }
+        },
+        padding: 10
+      }),
+      shift2({ padding: 10 })
+    ],
+    /**
+     * it is better to be less demanding on small screen sizes to see the content displayed correctly
+     */
+    placement: window.matchMedia("(min-width: 700px)").matches ? "right-start" : void 0,
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate3
+  });
+  const role = useRole3(context, { role: "menu" });
+  const dismiss = useDismiss3(context);
+  const listNavigation = useListNavigation2(context, {
+    listRef: listItemsRef,
+    onNavigate: setActiveIndex,
+    activeIndex
+  });
+  const typeahead = useTypeahead(context, {
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: setActiveIndex,
+    activeIndex
+  });
+  const { getFloatingProps, getItemProps } = useInteractions3([
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  const onContextMenuStable = useEventCallback(function onContextMenu(e) {
+    if (isOpenDebounceRef.current) {
+      return;
+    }
+    e.preventDefault();
+    const originalEvent = e instanceof MouseEvent ? e : e.detail.originalEvent;
+    contextEvent.current = e;
+    refs.setPositionReference({
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: originalEvent.clientX,
+          y: originalEvent.clientY,
+          top: originalEvent.clientY,
+          right: originalEvent.clientX,
+          bottom: originalEvent.clientY,
+          left: originalEvent.clientX
+        };
+      }
+    });
+    setIsOpen(true);
+    isOpenDebounceRef.current = true;
+  });
+  useEffect12(() => {
+    document.addEventListener(eventName, onContextMenuStable);
+    return () => {
+      document.removeEventListener(eventName, onContextMenuStable);
+    };
+  }, [eventName, onContextMenuStable]);
+  return /* @__PURE__ */ jsx35(FloatingPortal3, { children: isOpen && /* @__PURE__ */ jsx35(FloatingFocusManager2, { context, initialFocus: refs.floating, children: /* @__PURE__ */ jsx35(
+    "div",
+    {
+      className: "z-dialog",
+      ref: refs.setFloating,
+      style: { ...floatingStyles, ...style },
+      ...getFloatingProps(),
+      children: /* @__PURE__ */ jsx35(
+        Dialog,
+        {
+          placement: context.placement,
+          className: "animate-fade-in-list z-context-menu max-h-80 overflow-auto",
+          children: Children.map(
+            children,
+            (child, index) => isValidElement3(child) && cloneElement2(
+              child,
+              getItemProps({
+                tabIndex: activeIndex === index ? 0 : -1,
+                ref(node) {
+                  listItemsRef.current[index] = node;
+                },
+                onClick() {
+                  child.props.onClick?.(contextEvent.current);
+                  setIsOpen(false);
+                },
+                onMouseUp() {
+                  child.props.onClick?.(contextEvent.current);
+                  setIsOpen(false);
+                }
+              })
+            )
+          )
+        }
+      )
+    }
+  ) }) });
+}
+
+// src/components/context-menu/ContextMenuItem.tsx
+import { forwardRef as forwardRef11 } from "react";
+import clsx24 from "clsx";
+import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+var ContextMenuItem = forwardRef11(
+  ({ label, disabled, icon, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs16(
+      "button",
+      {
+        ...props,
+        className: clsx24(["option", className]),
+        ref,
+        role: "menuitem",
+        disabled,
+        children: [
+          icon,
+          /* @__PURE__ */ jsx36("span", { className: "content", children: label })
+        ]
+      }
+    );
+  }
+);
+var ContextMenuItem_default = ContextMenuItem;
+
+// src/components/dropdown-menu/DropdownMenu.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+function DropdownMenu({ children, ...options }) {
+  const popover = useDropdownMenu(options);
+  return /* @__PURE__ */ jsx37(DropdownMenuContext.Provider, { value: popover, children });
+}
+
+// src/components/dropdown-menu/DropdownMenuContent.tsx
+import { forwardRef as forwardRef12 } from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager3,
+  FloatingList as FloatingList2,
+  FloatingPortal as FloatingPortal4,
+  useMergeRefs as useMergeRefs3
+} from "@floating-ui/react";
+import clsx25 from "clsx";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var DropdownMenuContent = forwardRef12(
+  ({ style, children, ...props }, propRef) => {
+    const context = useDropdownMenuContext();
+    const floatingContext = context.context;
+    const ref = useMergeRefs3([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx38(FloatingPortal4, { children: /* @__PURE__ */ jsx38(FloatingFocusManager3, { context: floatingContext, modal: context.modal, children: /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref,
+        style: { ...context.floatingStyles, ...style },
+        ...context.getFloatingProps(props),
+        children: /* @__PURE__ */ jsx38(
+          Dialog,
+          {
+            placement: context.placement,
+            className: clsx25(`border-${context.color}-2`, "animate-fade-in-list"),
+            children: /* @__PURE__ */ jsx38("div", { className: "box", children: /* @__PURE__ */ jsx38(FloatingList2, { elementsRef: context.elementsRef, labelsRef: context.labelsRef, children }) })
+          }
+        )
+      }
+    ) }) });
+  }
+);
+var DropdownMenuContent_default = DropdownMenuContent;
+
+// src/components/dropdown-menu/DropdownMenuTrigger.tsx
+import { cloneElement as cloneElement3, forwardRef as forwardRef13, isValidElement as isValidElement4 } from "react";
+import { useMergeRefs as useMergeRefs4 } from "@floating-ui/react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var DropdownMenuTrigger = forwardRef13(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useDropdownMenuContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs4([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && isValidElement4(children)) {
+      return cloneElement3(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          "data-state": context.open ? "open" : "closed"
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx39(
+      Button_default,
+      {
+        variant: "outlined",
+        ref,
+        "data-state": context.open ? "open" : "closed",
+        ...context.getReferenceProps(props),
+        children
+      }
+    );
+  }
+);
+var DropdownMenuTrigger_default = DropdownMenuTrigger;
+
+// src/components/dropdown-menu/useDropdownMenu.tsx
+import { useCallback as useCallback11, useMemo as useMemo3, useRef as useRef17, useState as useState11 } from "react";
+import {
+  autoUpdate as autoUpdate4,
+  flip as flip4,
+  offset as offset4,
+  shift as shift3,
+  useClick,
+  useDismiss as useDismiss4,
+  useFloating as useFloating4,
+  useInteractions as useInteractions4,
+  useListNavigation as useListNavigation3,
+  useRole as useRole4,
+  useTypeahead as useTypeahead2
+} from "@floating-ui/react";
+var arrowWidth2 = 12;
+function useDropdownMenu({
+  initialOpen = false,
+  placement = "bottom",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color = "default",
+  modal = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState11(initialOpen);
+  const isUncontrolled = controlledOpen === null || controlledOpen === void 0;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;
+  const [activeIndex, setActiveIndex] = useState11(null);
+  const elementsRef = useRef17([]);
+  const labelsRef = useRef17([]);
+  const offsetVal = 2 + arrowWidth2 / 2;
+  const data = useFloating4({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate4,
+    middleware: [
+      offset4(offsetVal),
+      flip4({
+        // crossAxis: placement.includes('-'),
+        // fallbackAxisSideDirection: "end",
+      }),
+      shift3({ padding: 5 })
+    ]
+  });
+  const { context } = data;
+  const click = useClick(context, {
+    // TODO verify if use case to disable it
+    // enabled: isUncontrolled,
+  });
+  const dismiss = useDismiss4(context);
+  const role = useRole4(context);
+  const listNav = useListNavigation3(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    loop: true
+  });
+  const handleSelect = useCallback11(() => {
+    setOpen(false);
+  }, [setOpen]);
+  function handleTypeaheadMatch(index) {
+    if (open) {
+      setActiveIndex(index);
+    } else {
+      handleSelect();
+    }
+  }
+  const typeahead = useTypeahead2(context, {
+    listRef: labelsRef,
+    activeIndex,
+    onMatch: handleTypeaheadMatch
+  });
+  const interactions = useInteractions4([click, dismiss, role, listNav, typeahead]);
+  return useMemo3(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      elementsRef,
+      labelsRef,
+      color,
+      modal,
+      activeIndex,
+      handleSelect
+    }),
+    [
+      open,
+      setOpen,
+      interactions,
+      data,
+      color,
+      modal,
+      activeIndex,
+      // getItemProps,
+      handleSelect
+    ]
+  );
+}
+
+// src/components/dropdown-menu/useDropdownMenuContext.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var DropdownMenuContext = createContext4(null);
+function useDropdownMenuContext() {
+  const context = useContext4(DropdownMenuContext);
+  if (context === null) {
+    throw new Error("DropdownMenu components must be wrapped in <DropdownMenu />");
+  }
+  return context;
+}
+
+// src/components/dropdown-menu/DropdownMenuItem.tsx
+import { useListItem as useListItem2 } from "@floating-ui/react";
+import clsx26 from "clsx";
+import { jsx as jsx40 } from "react/jsx-runtime";
+function DropdownMenuItem({ children, onClick, ...rest }) {
+  const { activeIndex, getItemProps, handleSelect } = useDropdownMenuContext();
+  const { ref, index } = useListItem2({ label: children?.toString() });
+  const isActive = activeIndex === index;
+  return /* @__PURE__ */ jsx40(
+    "button",
+    {
+      className: clsx26("option", isActive && "bg-gray-1"),
+      ref,
+      role: "option",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      ...getItemProps({
+        ...rest,
+        onClick: (e) => {
+          onClick?.(e);
+          handleSelect();
+        }
+      }),
+      children
+    }
+  );
+}
+
+// src/components/dropdown-menu-nested/DropdownMenuNested.tsx
+import { forwardRef as forwardRef15 } from "react";
+
+// src/components/dropdown-menu-nested/MenuItemWithChildren.tsx
+import {
+  FloatingFocusManager as FloatingFocusManager4,
+  FloatingList as FloatingList3,
+  FloatingNode,
+  FloatingPortal as FloatingPortal5,
+  autoUpdate as autoUpdate5,
+  flip as flip5,
+  offset as offset5,
+  safePolygon,
+  shift as shift4,
+  useClick as useClick2,
+  useDismiss as useDismiss5,
+  useFloating as useFloating5,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useHover as useHover2,
+  useInteractions as useInteractions5,
+  useListItem as useListItem3,
+  useListNavigation as useListNavigation4,
+  useMergeRefs as useMergeRefs5,
+  useRole as useRole5,
+  useTypeahead as useTypeahead3
+} from "@floating-ui/react";
+import { forwardRef as forwardRef14, useContext as useContext5, useEffect as useEffect13, useRef as useRef18, useState as useState12 } from "react";
+
+// src/components/dropdown-menu-nested/MenuContext.ts
+import { createContext as createContext5 } from "react";
+var MenuContext = createContext5({
+  getItemProps: () => ({}),
+  activeIndex: null,
+  setActiveIndex: () => {
+  },
+  setHasFocusInside: () => {
+  },
+  isOpen: false
+});
+
+// src/components/dropdown-menu-nested/MenuItemWithChildren.tsx
+import clsx27 from "clsx";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+var MenuItemWithChildren = forwardRef14(
+  ({ children, label, triggerComponent: TriggerComponent = Button_default, ...props }, forwardedRef) => {
+    const [isOpen, setIsOpen] = useState12(false);
+    const [hasFocusInside, setHasFocusInside] = useState12(false);
+    const [activeIndex, setActiveIndex] = useState12(null);
+    const elementsRef = useRef18([]);
+    const labelsRef = useRef18([]);
+    const parent = useContext5(MenuContext);
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const item = useListItem3();
+    const isNested = parentId != null;
+    const { floatingStyles, refs, context } = useFloating5({
+      nodeId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: isNested ? "right-start" : "bottom-start",
+      middleware: [
+        offset5({ mainAxis: isNested ? -8 : 10, alignmentAxis: isNested ? 0 : 0 }),
+        flip5(),
+        shift4()
+      ],
+      whileElementsMounted: autoUpdate5
+    });
+    const hover = useHover2(context, {
+      enabled: isNested,
+      delay: { open: 75 },
+      handleClose: safePolygon({ blockPointerEvents: true })
+    });
+    const click = useClick2(context, {
+      event: "mousedown",
+      toggle: !isNested,
+      ignoreMouse: isNested
+    });
+    const role = useRole5(context, { role: "menu" });
+    const dismiss = useDismiss5(context, { bubbles: true });
+    const listNavigation = useListNavigation4(context, {
+      listRef: elementsRef,
+      activeIndex,
+      nested: isNested,
+      onNavigate: setActiveIndex
+    });
+    const typeahead = useTypeahead3(context, {
+      listRef: labelsRef,
+      onMatch: isOpen ? setActiveIndex : void 0,
+      activeIndex
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions5([
+      hover,
+      click,
+      role,
+      dismiss,
+      listNavigation,
+      typeahead
+    ]);
+    useEffect13(() => {
+      if (!tree)
+        return;
+      function handleTreeClick() {
+        setIsOpen(false);
+      }
+      function onSubMenuOpen(event) {
+        if (event.nodeId !== nodeId && event.parentId === parentId) {
+          setIsOpen(false);
+        }
+      }
+      tree.events.on("click", handleTreeClick);
+      tree.events.on("menuopen", onSubMenuOpen);
+      return () => {
+        tree.events.off("click", handleTreeClick);
+        tree.events.off("menuopen", onSubMenuOpen);
+      };
+    }, [tree, nodeId, parentId]);
+    useEffect13(() => {
+      if (isOpen && tree) {
+        tree.events.emit("menuopen", { parentId, nodeId });
+      }
+    }, [tree, isOpen, nodeId, parentId]);
+    const ref = useMergeRefs5([refs.setReference, item.ref, forwardedRef]);
+    return /* @__PURE__ */ jsxs17(FloatingNode, { id: nodeId, children: [
+      isNested ? /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          ref,
+          tabIndex: parent.activeIndex === item.index ? 0 : -1,
+          role: "menuitem",
+          "data-open": isOpen ? "" : void 0,
+          "data-nested": "",
+          "data-focus-inside": hasFocusInside ? "" : void 0,
+          ...getReferenceProps(
+            parent.getItemProps({
+              onFocus(event) {
+                props.onFocus?.(event);
+                setHasFocusInside(false);
+                parent.setHasFocusInside(true);
+              }
+            })
+          ),
+          className: clsx27(isNested && "option"),
+          children: [
+            /* @__PURE__ */ jsx41("span", { children: label }),
+            /* @__PURE__ */ jsx41("span", { className: "ml-auto", children: /* @__PURE__ */ jsx41("i", { className: "fe-angle-right mr-0", "aria-hidden": true }) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx41(
+        TriggerComponent,
+        {
+          ref,
+          "data-open": isOpen ? "" : void 0,
+          "data-focus-inside": hasFocusInside ? "" : void 0,
+          ...props,
+          ...getReferenceProps(
+            parent.getItemProps({
+              onFocus(event) {
+                props.onFocus?.(event);
+                setHasFocusInside(false);
+                parent.setHasFocusInside(true);
+              }
+            })
+          ),
+          className: clsx27(
+            isNested && "option",
+            !isNested && !TriggerComponent && "ll-dropdown-menu-trigger"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx41(
+        MenuContext.Provider,
+        {
+          value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen },
+          children: isOpen && /* @__PURE__ */ jsx41(FloatingPortal5, { children: /* @__PURE__ */ jsx41(
+            FloatingFocusManager4,
+            {
+              context,
+              modal: false,
+              initialFocus: isNested ? -1 : 0,
+              returnFocus: !isNested,
+              children: /* @__PURE__ */ jsx41(FloatingList3, { elementsRef, labelsRef, children: /* @__PURE__ */ jsx41("div", { ref: refs.setFloating, style: floatingStyles, className: "outline-none", children: /* @__PURE__ */ jsx41(Dialog, { ...getFloatingProps(), children }) }) })
+            }
+          ) })
+        }
+      )
+    ] });
+  }
+);
+var MenuItemWithChildren_default = MenuItemWithChildren;
+
+// src/components/dropdown-menu-nested/DropdownMenuNested.tsx
+import { FloatingTree } from "@floating-ui/react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var DropdownMenuNested = forwardRef15((props, ref) => {
+  return /* @__PURE__ */ jsx42(FloatingTree, { children: /* @__PURE__ */ jsx42(MenuItemWithChildren_default, { ...props, ref }) });
+});
+var DropdownMenuNested_default = DropdownMenuNested;
+
+// src/components/dropdown-menu-nested/MenuItem.tsx
+import { useFloatingTree as useFloatingTree2, useListItem as useListItem4, useMergeRefs as useMergeRefs6 } from "@floating-ui/react";
+import { forwardRef as forwardRef16, useContext as useContext6 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var MenuItem = forwardRef16(
+  ({ label, disabled, ...props }, forwardedRef) => {
+    const menu = useContext6(MenuContext);
+    const item = useListItem4({ label: disabled ? null : label });
+    const tree = useFloatingTree2();
+    const isActive = item.index === menu.activeIndex;
+    return /* @__PURE__ */ jsx43(
+      "button",
+      {
+        ...props,
+        ref: useMergeRefs6([item.ref, forwardedRef]),
+        type: "button",
+        role: "menuitem",
+        className: "option",
+        tabIndex: isActive ? 0 : -1,
+        disabled,
+        ...menu.getItemProps({
+          onClick(event) {
+            props.onClick?.(event);
+            tree?.events.emit("click");
+          },
+          onFocus(event) {
+            props.onFocus?.(event);
+            menu.setHasFocusInside(true);
+          }
+        }),
+        children: label
+      }
+    );
+  }
+);
+var MenuItem_default = MenuItem;
+
+// src/components/modal/useModal.ts
+import { useMemo as useMemo4, useState as useState13 } from "react";
+import { useClick as useClick3, useDismiss as useDismiss6, useFloating as useFloating6, useInteractions as useInteractions6, useRole as useRole6 } from "@floating-ui/react";
+function useModal({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color = "default"
+} = {}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState13(initialOpen);
+  const [labelId, setLabelId] = useState13();
+  const [descriptionId, setDescriptionId] = useState13();
+  const isUncontrolled = controlledOpen === null || controlledOpen === void 0;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;
+  const data = useFloating6({
+    open,
+    onOpenChange: setOpen
+  });
+  const { context } = data;
+  const click = useClick3(context);
+  const dismiss = useDismiss6(context);
+  const role = useRole6(context);
+  const interactions = useInteractions6([click, dismiss, role]);
+  return useMemo4(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      color,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, setOpen, interactions, data, color, labelId, descriptionId]
+  );
+}
+
+// src/components/modal/useModalContext.ts
+import { createContext as createContext6, useContext as useContext7 } from "react";
+var ModalContext = createContext6(null);
+function useModalContext() {
+  const context = useContext7(ModalContext);
+  if (context === null) {
+    throw new Error("Modal components must be wrapped in <Modal />");
+  }
+  return context;
+}
+
+// src/components/modal/Modal.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+function Modal({ children, ...options }) {
+  const modal = useModal(options);
+  return /* @__PURE__ */ jsx44(ModalContext.Provider, { value: modal, children });
+}
+
+// src/components/modal/ModalContent.tsx
+import {
+  FloatingFocusManager as FloatingFocusManager5,
+  FloatingOverlay,
+  FloatingPortal as FloatingPortal6,
+  useMergeRefs as useMergeRefs7
+} from "@floating-ui/react";
+import { forwardRef as forwardRef17 } from "react";
+import clsx28 from "clsx";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var ModalContent = forwardRef17(
+  ({ style, children, ...props }, propRef) => {
+    const context = useModalContext();
+    const floatingContext = context.context;
+    const ref = useMergeRefs7([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx45(FloatingPortal6, { children: /* @__PURE__ */ jsx45(
+      FloatingOverlay,
+      {
+        className: clsx28(["flex-center bg-gray-7/40 z-overlay", "animate-fade-in-opacity"]),
+        lockScroll: true,
+        children: /* @__PURE__ */ jsx45(FloatingFocusManager5, { context: floatingContext, children: /* @__PURE__ */ jsx45(
+          Dialog,
+          {
+            className: clsx28("w-96 max-w-full", `border-${context.color}-2`, "animate-fade-in"),
+            ref,
+            "aria-labelledby": context.labelId,
+            "aria-describedby": context.descriptionId,
+            style,
+            ...context.getFloatingProps(props),
+            children
+          }
+        ) })
+      }
+    ) });
+  }
+);
+var ModalContent_default = ModalContent;
+
+// src/components/modal/ModalTrigger.tsx
+import { cloneElement as cloneElement4, forwardRef as forwardRef18, isValidElement as isValidElement5 } from "react";
+import { useMergeRefs as useMergeRefs8 } from "@floating-ui/react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var ModalTrigger = forwardRef18(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = useModalContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs8([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && isValidElement5(children)) {
+      return cloneElement4(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          "data-state": context.open ? "open" : "closed"
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx46(
+      Button_default,
+      {
+        ref,
+        "data-state": context.open ? "open" : "closed",
+        ...context.getReferenceProps(props),
+        children
+      }
+    );
+  }
+);
+var ModalTrigger_default = ModalTrigger;
+
+// src/components/modal/Components.tsx
+import clsx29 from "clsx";
+import { Fragment, jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+function ModalHeader({
+  children,
+  className,
+  closeButton = true,
+  ...props
+}) {
+  const { setOpen } = useModalContext();
+  return /* @__PURE__ */ jsxs18(Fragment, { children: [
+    closeButton && /* @__PURE__ */ jsx47("div", { className: "p-1 float-right", children: /* @__PURE__ */ jsx47(Button_default, { icon: true, variant: "text", color: "gray", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx47("i", { className: "fe-cancel" }) }) }),
+    /* @__PURE__ */ jsx47("header", { className: clsx29("flex items-center px-2 pt-2", className), ...props, children: /* @__PURE__ */ jsx47("h4", { children }) })
+  ] });
+}
+function ModalDescription({ children, className, height, ...props }) {
+  if (!height) {
+    return /* @__PURE__ */ jsx47("div", { className: clsx29("p-2", className), ...props, children });
+  }
+  return /* @__PURE__ */ jsx47("div", { className: clsx29("py-2", className), ...props, children: /* @__PURE__ */ jsx47(Scroll, { style: { height: `${height}px` }, children }) });
+}
+function ModalFooter({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx47("footer", { className: clsx29("relative z-10 px-2 pb-2", className), ...props, children });
+}
+
+// src/components/notification/NotificationsProvider.tsx
+import { useEffect as useEffect14, useRef as useRef19, useState as useState14 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+function NotificationsProvider({ children }) {
+  const [notifications, setNotifications] = useState14([]);
+  const container = useRef19(null);
+  if (!container.current) {
+    container.current = document.createElement("div");
+    container.current.id = Math.floor(Math.random() * 1e5).toString();
+    container.current.classList.add("fixed", "bottom-0", "left-0", "right-0", "z-notification");
+    document.body.append(container.current);
+  }
+  useEffect14(() => {
+    return () => {
+      container.current && container.current.remove();
+    };
+  }, []);
+  const managerRef = useRef19();
+  if (!managerRef.current) {
+    managerRef.current = createNotificationsManager(setNotifications);
+  }
+  const manager = managerRef.current;
+  return /* @__PURE__ */ jsxs19(Fragment2, { children: [
+    /* @__PURE__ */ jsx48(NotificationsContext.Provider, { value: manager, children }),
+    createPortal(
+      /* snack-bar-inner */
+      /* @__PURE__ */ jsx48("div", { className: "mb-4 mx-4 flex flex-col gap-4 items-center", children: notifications.map((props) => /* @__PURE__ */ createElement2(
+        Snack,
+        {
+          ...props,
+          key: props.id,
+          onRemove: () => manager.removeNotification(props.id)
+        }
+      )) }),
+      container.current
+    )
+  ] });
+}
+
+// src/components/popover/Popover.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+function Popover({ children, ...options }) {
+  const popover = usePopover(options);
+  return /* @__PURE__ */ jsx49(PopoverContext.Provider, { value: popover, children });
+}
+
+// src/components/popover/PopoverContent.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { FloatingFocusManager as FloatingFocusManager6, FloatingPortal as FloatingPortal7, useMergeRefs as useMergeRefs9 } from "@floating-ui/react";
+import clsx30 from "clsx";
+import { jsx as jsx50, jsxs as jsxs20 } from "react/jsx-runtime";
+var PopoverContent = forwardRef19(
+  ({ style, children, className, ...props }, propRef) => {
+    const context = usePopoverContext();
+    const floatingContext = context.context;
+    const ref = useMergeRefs9([context.refs.setFloating, propRef]);
+    if (!context.open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx50(FloatingPortal7, { children: /* @__PURE__ */ jsx50(FloatingFocusManager6, { context: floatingContext, modal: context.modal, children: /* @__PURE__ */ jsx50(
+      "div",
+      {
+        ref,
+        style: { ...context.floatingStyles, ...style },
+        "aria-labelledby": context.labelId,
+        "aria-describedby": context.descriptionId,
+        ...context.getFloatingProps(props),
+        children: /* @__PURE__ */ jsxs20(
+          Dialog,
+          {
+            placement: context.placement,
+            color: context.color,
+            className: clsx30("animate-fade-in-list", className),
+            children: [
+              children,
+              /* @__PURE__ */ jsx50(
+                "div",
+                {
+                  ref: context.arrowRef,
+                  style: computeArrowStyle(context),
+                  className: "p8n-arrow"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) }) });
+  }
+);
+var PopoverContent_default = PopoverContent;
+
+// src/components/popover/PopoverTrigger.tsx
+import { cloneElement as cloneElement5, forwardRef as forwardRef20, isValidElement as isValidElement6 } from "react";
+import { useMergeRefs as useMergeRefs10 } from "@floating-ui/react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var PopoverTrigger = forwardRef20(
+  ({ children, asChild = false, ...props }, propRef) => {
+    const context = usePopoverContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs10([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && isValidElement6(children)) {
+      return cloneElement5(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          "data-state": context.open ? "open" : "closed"
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx51(
+      Button_default,
+      {
+        variant: "outlined",
+        ref,
+        "data-state": context.open ? "open" : "closed",
+        ...context.getReferenceProps(props),
+        children
+      }
+    );
+  }
+);
+var PopoverTrigger_default = PopoverTrigger;
+
+// src/components/popover/usePopover.tsx
+import { useMemo as useMemo5, useRef as useRef20, useState as useState15 } from "react";
+import {
+  arrow as arrow2,
+  autoUpdate as autoUpdate6,
+  flip as flip6,
+  offset as offset6,
+  shift as shift5,
+  useClick as useClick4,
+  useDismiss as useDismiss7,
+  useFloating as useFloating7,
+  useInteractions as useInteractions7,
+  useRole as useRole7
+} from "@floating-ui/react";
+var arrowWidth3 = 12;
+function usePopover({
+  initialOpen = false,
+  placement = "bottom",
+  open: controlledOpen,
+  onOpen: setControlledOpen,
+  color,
+  modal = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState15(initialOpen);
+  const [labelId, setLabelId] = useState15();
+  const [descriptionId, setDescriptionId] = useState15();
+  const isUncontrolled = controlledOpen === null || controlledOpen === void 0;
+  const open = isUncontrolled ? uncontrolledOpen : controlledOpen;
+  const setOpen = isUncontrolled ? setUncontrolledOpen : setControlledOpen;
+  const arrowRef = useRef20(null);
+  const offsetVal = arrowWidth3 / 2;
+  const data = useFloating7({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate6,
+    middleware: [
+      offset6(offsetVal),
+      flip6(),
+      shift5({ padding: 5 }),
+      arrow2({
+        element: arrowRef,
+        padding: 12
+      })
+    ]
+  });
+  const { context } = data;
+  const click = useClick4(context, {
+    // TODO verify if use case to disable it
+    // enabled: isUncontrolled,
+  });
+  const dismiss = useDismiss7(context);
+  const role = useRole7(context);
+  const interactions = useInteractions7([click, dismiss, role]);
+  return useMemo5(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      arrowRef,
+      color,
+      modal,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId
+    }),
+    [open, setOpen, interactions, data, color, modal, labelId, descriptionId]
+  );
+}
+
+// src/components/popover/usePopoverContext.ts
+import { createContext as createContext7, useContext as useContext8 } from "react";
+var PopoverContext = createContext7(null);
+function usePopoverContext() {
+  const context = useContext8(PopoverContext);
+  if (context === null) {
+    throw new Error("Popover components must be wrapped in <Popover />");
+  }
+  return context;
+}
+
+// src/components/popover/Components.tsx
+import clsx31 from "clsx";
+import { Fragment as Fragment3, jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
+function PopoverHeader({
+  children,
+  closeButton = true,
+  className,
+  ...props
+}) {
+  const { setOpen } = usePopoverContext();
+  return /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    closeButton && /* @__PURE__ */ jsx52("div", { className: "p-1 float-right", children: /* @__PURE__ */ jsx52(Button_default, { icon: true, variant: "text", color: "gray", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx52("i", { className: "fe-cancel" }) }) }),
+    /* @__PURE__ */ jsx52("header", { className: clsx31("flex items-center px-2 pt-2", className), ...props, children: /* @__PURE__ */ jsx52("h4", { children }) })
+  ] });
+}
+function PopoverDescription({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx52("div", { className: clsx31("p-2", className), ...props, children });
+}
+function PopoverFooter({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx52("footer", { className: clsx31("relative z-10 px-2 pb-2", className), ...props, children });
+}
+
+// src/components/select/SelectOption.tsx
+import { useListItem as useListItem5 } from "@floating-ui/react";
+import clsx32 from "clsx";
+import { jsx as jsx53 } from "react/jsx-runtime";
+function SelectOption({ label }) {
+  const { activeIndex, selectedIndex, getItemProps, handleSelect } = useSelect();
+  const { ref, index } = useListItem5({ label });
+  const isActive = activeIndex === index;
+  const isSelected = selectedIndex === index;
+  return /* @__PURE__ */ jsx53(
+    "button",
+    {
+      className: clsx32("option", isSelected && "bg-gray-2", isActive && "bg-gray-1"),
+      ref,
+      role: "option",
+      "aria-selected": isActive && isSelected,
+      tabIndex: isActive ? 0 : -1,
+      ...getItemProps({
+        onClick: () => handleSelect(index)
+      }),
+      children: label
+    }
+  );
+}
+
+// src/components/select/SelectSelection.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+function SelectSelection({
+  label,
+  multiple = false
+}) {
+  return multiple ? /* @__PURE__ */ jsx54(Badge, { className: "ml-1", children: label }) : /* @__PURE__ */ jsx54("span", { children: label });
+}
+
+// src/components/select/Select.tsx
+import {
+  forwardRef as forwardRef21,
+  useCallback as useCallback12,
+  useEffect as useEffect15,
+  useMemo as useMemo6,
+  useRef as useRef21,
+  useState as useState16
+} from "react";
+import {
+  FloatingFocusManager as FloatingFocusManager7,
+  FloatingList as FloatingList4,
+  FloatingPortal as FloatingPortal8,
+  autoUpdate as autoUpdate7,
+  flip as flip7,
+  offset as offset7,
+  size as size3,
+  useClick as useClick5,
+  useDismiss as useDismiss8,
+  useFloating as useFloating8,
+  useInteractions as useInteractions8,
+  useListNavigation as useListNavigation5,
+  useMergeRefs as useMergeRefs11,
+  useRole as useRole8,
+  useTypeahead as useTypeahead4
+} from "@floating-ui/react";
+
+// src/components/select/useSelectContext.ts
+import { createContext as createContext8, useContext as useContext9 } from "react";
+var SelectContext = createContext8(null);
+function useSelect() {
+  const context = useContext9(SelectContext);
+  if (context === null) {
+    throw new Error("Select components must be wrapped in <Select>");
+  }
+  return context;
+}
+
+// src/components/select/Select.tsx
+import clsx33 from "clsx";
+import { jsx as jsx55, jsxs as jsxs22 } from "react/jsx-runtime";
+import { createElement as createElement3 } from "react";
+function defaultGetSearchableValue(matchReg, option) {
+  return matchReg.test(option.label.toLowerCase().trim());
+}
+var Select = forwardRef21(
+  ({
+    variant = "normal",
+    disabled = false,
+    showArrow = true,
+    selectionClassName,
+    width = "100%",
+    floatingMinWidth = 130,
+    placement = "bottom",
+    searchable = false,
+    required = true,
+    value = null,
+    onChange = null,
+    placeholder = "Select ...",
+    getSearchableValue,
+    selectSelectionComponent: SelectSelectionCustomComponent,
+    selectOptionComponent: SelectOptionCustomComponent,
+    options = [],
+    zIndex
+  }, propRef) => {
+    const isControlled = onChange !== null;
+    const onChangeStable = useEventCallback(onChange);
+    const [uncontrolledSelectedIndex, setUncontrolledSelectedIndex] = useState16(null);
+    const [search, setSearch] = useState16("");
+    const filteredOptions = useMemo6(
+      () => options.filter((option) => {
+        if (!searchable || search.trim() === "") {
+          return true;
+        }
+        const fn = getSearchableValue ?? defaultGetSearchableValue;
+        const matchReg = new RegExp(search.toLowerCase().trim());
+        return fn(matchReg, option);
+      }),
+      [searchable, search, getSearchableValue, options]
+    );
+    let selectedIndex = null;
+    if (isControlled) {
+      if (value !== null) {
+        const pos = filteredOptions.findIndex((o) => o.value === value);
+        if (pos !== -1) {
+          selectedIndex = pos;
+        }
+      }
+    } else {
+      selectedIndex = uncontrolledSelectedIndex;
+    }
+    const [isOpen, setIsOpen] = useState16(false);
+    const [activeIndex, setActiveIndex] = useState16(null);
+    const [searchHasFocus, setSearchHasFocus] = useState16(false);
+    const SelectSelectionComponent = SelectSelectionCustomComponent ?? SelectSelection;
+    function handleSearchChange(e) {
+      setActiveIndex(null);
+      setSearch(e.target.value);
+    }
+    const { refs, floatingStyles, context } = useFloating8({
+      placement,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      whileElementsMounted: autoUpdate7,
+      middleware: [
+        offset7(5),
+        flip7({ padding: 10 }),
+        size3({
+          apply({ rects, elements, availableHeight }) {
+            Object.assign(elements.floating.style, {
+              width: `${Math.max(floatingMinWidth, rects.reference.width)}px`
+            });
+            const firstChild = elements.floating.firstElementChild;
+            if (firstChild) {
+              firstChild.style.maxHeight = `${Math.min(availableHeight, 300)}px`;
+            }
+          },
+          padding: 10
+        })
+      ]
+    });
+    const ref = useMergeRefs11([refs.setReference, propRef]);
+    const listRef = useRef21([]);
+    const labelsRef = useRef21([]);
+    const isTypingRef = useRef21(false);
+    const click = useClick5(context, { event: "mousedown" });
+    const dismiss = useDismiss8(context);
+    const role = useRole8(context, { role: "listbox" });
+    const listNav = useListNavigation5(context, {
+      listRef,
+      activeIndex,
+      focusItemOnHover: searchable ? false : true,
+      selectedIndex,
+      onNavigate: setActiveIndex,
+      loop: true
+    });
+    const typeahead = useTypeahead4(context, {
+      enabled: !searchHasFocus,
+      listRef: labelsRef,
+      activeIndex,
+      selectedIndex,
+      onMatch: isOpen ? setActiveIndex : void 0,
+      onTypingChange(isTyping) {
+        isTypingRef.current = isTyping;
+      }
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions8([
+      listNav,
+      typeahead,
+      click,
+      dismiss,
+      role
+    ]);
+    useEffect15(() => {
+      if (SelectOptionCustomComponent) {
+        return;
+      }
+      filteredOptions.map((option, i) => {
+        labelsRef.current[i] = option.label;
+      });
+    }, [search, filteredOptions, SelectOptionCustomComponent]);
+    const handleSelect = useCallback12(
+      (index) => {
+        setIsOpen(false);
+        setSearch("");
+        if (isControlled) {
+          const event = {
+            target: {
+              value: index === null ? null : filteredOptions[index].value
+            }
+          };
+          onChangeStable(event);
+        } else {
+          setUncontrolledSelectedIndex(index);
+        }
+      },
+      [isControlled, onChangeStable, filteredOptions]
+    );
+    const selectContext = useMemo6(
+      () => ({
+        activeIndex,
+        selectedIndex,
+        getItemProps,
+        handleSelect
+      }),
+      [activeIndex, selectedIndex, getItemProps, handleSelect]
+    );
+    const showCancelButton = !required && selectedIndex !== null;
+    return /* @__PURE__ */ jsxs22("div", { children: [
+      /* @__PURE__ */ jsxs22(
+        "div",
+        {
+          className: clsx33(
+            // "selection",
+            "rounded-2xl outline outline-1 outline-offset-[-1px] hover:outline-gray-3 flex focus-full:outline-yellow-4 focus-full:outline-2 cursor-pointer",
+            variant === "normal" ? "outline-gray-2" : "outline-transparent",
+            selectionClassName,
+            isOpen && "focus",
+            disabled && "disabled"
+          ),
+          ref,
+          tabIndex: 0,
+          style: {
+            width: typeof width === "number" ? `${width}px` : width
+          },
+          ...getReferenceProps(),
+          children: [
+            /* @__PURE__ */ jsx55("span", { className: clsx33("h-8 flex-1 flex items-center px-2"), children: selectedIndex !== null ? /* @__PURE__ */ createElement3(SelectSelectionComponent, { ...filteredOptions[selectedIndex], key: selectedIndex }) : placeholder }),
+            showCancelButton && /* @__PURE__ */ jsx55(
+              Button_default,
+              {
+                withRipple: false,
+                icon: true,
+                variant: "text",
+                color: "gray",
+                onMouseDown: (e) => {
+                  e.stopPropagation();
+                },
+                onClick: () => {
+                  handleSelect(null);
+                },
+                children: /* @__PURE__ */ jsx55("i", { className: "fe-cancel" })
+              }
+            ),
+            !showCancelButton && showArrow && /* @__PURE__ */ jsx55(Button_default, { color: "gray", withRipple: false, icon: true, variant: "text", focusable: false, children: /* @__PURE__ */ jsx55("i", { className: isOpen ? "fe-angle-up" : "fe-angle-down" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx55(FloatingPortal8, { children: /* @__PURE__ */ jsx55(SelectContext.Provider, { value: selectContext, children: isOpen && /* @__PURE__ */ jsx55(FloatingFocusManager7, { context, modal: false, children: /* @__PURE__ */ jsx55(
+        "div",
+        {
+          className: "z-dialog outline-none",
+          ref: refs.setFloating,
+          style: {
+            ...floatingStyles,
+            zIndex
+          },
+          ...getFloatingProps(),
+          children: /* @__PURE__ */ jsxs22(
+            Dialog,
+            {
+              placement: context.placement,
+              className: "animate-fade-in-list max-h-80 overflow-auto",
+              children: [
+                searchable && /* @__PURE__ */ jsx55("div", { className: "p-2", children: /* @__PURE__ */ jsx55(
+                  Input_default,
+                  {
+                    placeholder: "Search",
+                    tabIndex: selectedIndex === null ? 0 : -1,
+                    value: search,
+                    onChange: handleSearchChange,
+                    onFocus: () => setSearchHasFocus(true),
+                    onBlur: () => setSearchHasFocus(false)
+                  }
+                ) }),
+                SelectOptionCustomComponent ? /* @__PURE__ */ jsx55(FloatingList4, { elementsRef: listRef, labelsRef, children: filteredOptions.map((option) => /* @__PURE__ */ createElement3(SelectOptionCustomComponent, { ...option, key: option.value })) }) : filteredOptions.map((option, index) => {
+                  const isActive = activeIndex === index;
+                  const isSelected = selectedIndex === index;
+                  return /* @__PURE__ */ jsx55(
+                    "button",
+                    {
+                      className: clsx33(
+                        "option",
+                        isSelected && "bg-gray-2",
+                        isActive && "bg-gray-1"
+                      ),
+                      role: "option",
+                      "aria-selected": isActive && isSelected,
+                      tabIndex: isActive ? 0 : -1,
+                      ref: (node) => {
+                        listRef.current[index] = node;
+                      },
+                      ...getItemProps({
+                        onClick: () => handleSelect(index)
+                      }),
+                      children: option.label
+                    },
+                    option.value
+                  );
+                })
+              ]
+            }
+          )
+        }
+      ) }) }) })
+    ] });
+  }
+  // see : React with Typescript -- Generics while using React.forwardRef
+  // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+);
+var Select_default = Select;
+
+// src/components/steps/Step.tsx
+import clsx34 from "clsx";
+import { jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
+function Step({
+  status = "todo",
+  className,
+  children,
+  markerClassName,
+  contentClassName,
+  align = "start",
+  icon = null,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs23("li", { className: clsx34(["ll-step", `status-${status}`, `align-${align}`, className]), ...rest, children: [
+    /* @__PURE__ */ jsx56("div", { className: "marker-container", children: /* @__PURE__ */ jsx56(
+      "div",
+      {
+        className: clsx34([
+          "marker",
+          "relative z-[1] inline-flex items-center justify-center rounded-full ",
+          ["done", "current"].includes(status) && "active",
+          markerClassName
+        ]),
+        children: icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx56("div", { className: clsx34(["content", contentClassName]), children })
+  ] });
+}
+
+// src/components/steps/Steps.tsx
+import clsx35 from "clsx";
+import { jsx as jsx57 } from "react/jsx-runtime";
+function Steps({
+  direction = "vertical",
+  lineStyle = "solid",
+  markerType = "circle",
+  associateLineWithStep = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx57(
+    "ul",
+    {
+      ...rest,
+      className: clsx35(["ll-steps", className]),
+      "data-global-line": (!associateLineWithStep).toString(),
+      "data-direction": direction,
+      "data-marker": markerType,
+      style: {
+        "--line-style": lineStyle,
+        "--line-space": associateLineWithStep ? "4px" : "0px"
+        // "--step-circle-radius": markerType === "circle" ? "18px" : "9px",
+      }
+    }
+  );
+}
+
+// src/components/steps/util.ts
+function getIndexLetter(index) {
+  return String.fromCharCode(65 + index % 26);
+}
+
+// src/components/sortable/Sortable.tsx
+import { useMemo as useMemo7 } from "react";
+import {
+  ReactSortable
+} from "react-sortablejs";
+import { jsx as jsx58 } from "react/jsx-runtime";
+function Sortable({
+  children,
+  list,
+  setList,
+  ...rest
+}) {
+  const mutableList = useMemo7(() => {
+    return list.map((item) => ({ ...item }));
+  }, [list]);
+  function handleList(updatedList, sortable, store) {
+    if (!arrayEquals(
+      updatedList.map((l) => l.id),
+      mutableList.map((l) => l.id)
+    )) {
+      setList(updatedList, sortable, store);
+    }
+  }
+  return /* @__PURE__ */ jsx58(ReactSortable, { list: mutableList, setList: handleList, ...rest, children });
+}
+
+// src/tailwind/pentatrionTw.ts
+import plugin from "tailwindcss/plugin";
+
+// src/tailwind/keyframes.ts
+var keyframes = {
+  ripple: {
+    to: {
+      transform: "scale(4)",
+      opacity: "0"
+    }
+  },
+  "fade-in": {
+    from: {
+      transform: "scale(.8)",
+      opacity: "0"
+    },
+    to: {
+      transform: "scale(1)",
+      opacity: "1"
+    }
+  },
+  "fade-in-list": {
+    from: {
+      transform: "scaleY(.8)",
+      opacity: "0"
+    },
+    to: {
+      transform: "scaleY(1)",
+      opacity: "1"
+    }
+  },
+  "fade-out": {
+    from: {
+      transform: "scale(1)",
+      opacity: "1"
+    },
+    to: {
+      transform: "scale(.8)",
+      opacity: "0"
+    }
+  },
+  "fade-in-opacity": {
+    from: {
+      opacity: "0"
+    },
+    to: {
+      opacity: "1"
+    }
+  },
+  flash: {
+    "0%": {
+      opacity: "0"
+    },
+    "50%": {
+      opacity: "1"
+    },
+    "100%": {
+      opacity: "0"
+    }
+  },
+  "loader-stroke": {
+    from: {
+      // check : packages/pentatrion-design/components/loader/Loader.tsx
+      // for dashoffset value
+      "stroke-dashoffset": "43.699"
+    },
+    to: {
+      "stroke-dashoffset": "0"
+    }
+  }
+};
+
+// src/tailwind/pentatrionTw.ts
+import defaultTheme from "tailwindcss/defaultTheme";
+var pentatrionTw_default = plugin(
+  ({ addVariant }) => {
+    addVariant("active-full", ["&:active", "&.active"]);
+    addVariant("focus-full", ["&:has(input:focus)", "&.focus", "&:focus"]);
+  },
+  {
+    theme: {
+      zIndex: {
+        auto: "auto",
+        0: "0",
+        10: "10",
+        20: "20",
+        30: "30",
+        40: "40",
+        50: "50",
+        dialog: "100",
+        overlay: "100",
+        tooltip: "100",
+        "context-menu": "90",
+        notification: "80"
+      },
+      transitionDuration: {
+        ...defaultTheme.transitionDuration,
+        DEFAULT: "300ms"
+      },
+      colors: {
+        transparent: "transparent",
+        current: "currentColor",
+        black: "rgb(var(--color-black) / <alpha-value>)",
+        white: "rgb(var(--color-white) / <alpha-value>)",
+        yellow: {
+          1: "rgb(var(--color-yellow-1) / <alpha-value>)",
+          2: "rgb(var(--color-yellow-2) / <alpha-value>)",
+          3: "rgb(var(--color-yellow-3) / <alpha-value>)",
+          4: "rgb(var(--color-yellow-4) / <alpha-value>)",
+          5: "rgb(var(--color-yellow-5) / <alpha-value>)",
+          // color of the text when bg is yellow 3
+          text: "rgb(var(--color-yellow-text) / <alpha-value>)"
+        },
+        green: {
+          1: "rgb(var(--color-green-1) / <alpha-value>)",
+          2: "rgb(var(--color-green-2) / <alpha-value>)",
+          3: "rgb(var(--color-green-3) / <alpha-value>)",
+          4: "rgb(var(--color-green-4) / <alpha-value>)",
+          5: "rgb(var(--color-green-5) / <alpha-value>)",
+          // color of the text when bg is green
+          text: "rgb(var(--color-green-text) / <alpha-value>)"
+        },
+        blue: {
+          1: "rgb(var(--color-blue-1) / <alpha-value>)",
+          2: "rgb(var(--color-blue-2) / <alpha-value>)",
+          3: "rgb(var(--color-blue-3) / <alpha-value>)",
+          4: "rgb(var(--color-blue-4) / <alpha-value>)",
+          5: "rgb(var(--color-blue-5) / <alpha-value>)",
+          // color of the text when bg is blue
+          text: "rgb(var(--color-blue-text) / <alpha-value>)"
+        },
+        orange: {
+          1: "rgb(var(--color-orange-1) / <alpha-value>)",
+          2: "rgb(var(--color-orange-2) / <alpha-value>)",
+          3: "rgb(var(--color-orange-3) / <alpha-value>)",
+          4: "rgb(var(--color-orange-4) / <alpha-value>)",
+          5: "rgb(var(--color-orange-5) / <alpha-value>)",
+          // color of the text when bg is orange
+          text: "rgb(var(--color-orange-text) / <alpha-value>)"
+        },
+        red: {
+          1: "rgb(var(--color-red-1) / <alpha-value>)",
+          2: "rgb(var(--color-red-2) / <alpha-value>)",
+          3: "rgb(var(--color-red-3) / <alpha-value>)",
+          4: "rgb(var(--color-red-4) / <alpha-value>)",
+          5: "rgb(var(--color-red-5) / <alpha-value>)",
+          // color of the text when bg is red
+          text: "rgb(var(--color-red-text) / <alpha-value>)"
+        },
+        gray: {
+          0: "rgb(var(--color-gray-0) / <alpha-value>)",
+          1: "rgb(var(--color-gray-1) / <alpha-value>)",
+          2: "rgb(var(--color-gray-2) / <alpha-value>)",
+          3: "rgb(var(--color-gray-3) / <alpha-value>)",
+          4: "rgb(var(--color-gray-4) / <alpha-value>)",
+          5: "rgb(var(--color-gray-5) / <alpha-value>)",
+          6: "rgb(var(--color-gray-6) / <alpha-value>)",
+          7: "rgb(var(--color-gray-7) / <alpha-value>)",
+          8: "rgb(var(--color-gray-8) / <alpha-value>)",
+          // color of the text when bg is gray
+          text: "rgb(var(--color-gray-text) / <alpha-value>)"
+        }
+      },
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.1)",
+        DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.15), 0 1px 2px -1px rgb(0 0 0 / 0.15)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.15)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
+        xl: "0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.15)",
+        "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.35)",
+        inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.1)",
+        dark: "0 0 0 1px rgb(var(--color-gray-2))",
+        none: "none"
+      },
+      fontFamily: {
+        sans: ["ui-sans-serif", "system-ui", "sans-serif"],
+        fontello: ["fontello"],
+        serif: defaultTheme.fontFamily.serif,
+        mono: defaultTheme.fontFamily.mono
+      },
+      extend: {
+        // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
+        backgroundSize: {
+          full: "100%"
+        },
+        dropShadow: {
+          arrow: "0 1px 3px rgb(var(--color-gray-3))"
+        },
+        transitionProperty: {
+          "color-shadow": "color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow"
+        },
+        gridTemplateColumns: {
+          "repeat-fill-300": "repeat(auto-fill, minmax(300px, 1fr))",
+          "repeat-fill-160": "repeat(auto-fill, minmax(160px, 1fr))"
+        },
+        animation: {
+          ripple: "ripple .9s linear",
+          "fade-in": "fade-in 250ms ease both",
+          "fade-in-list": "fade-in-list 150ms ease both",
+          "fade-out": "fade-out 250ms ease both",
+          "fade-in-opacity": "fade-in-opacity 250ms ease both",
+          flash: "flash 1000ms ease both infinite",
+          "loader-stroke": "loader-stroke 1s linear infinite"
+        },
+        fontSize: {
+          "2xs": ["0.688rem", { lineHeight: "1rem" }]
+        },
+        keyframes
+      }
+    }
+  }
+);
+export {
+  Autocomplete_default as Autocomplete,
+  AutocompleteOption_default as AutocompleteOption,
+  Badge,
+  Button_default as Button,
+  ButtonGroup,
+  Checkbox_default as Checkbox,
+  Code,
+  ContextMenu,
+  ContextMenuItem_default as ContextMenuItem,
+  Dialog,
+  DropdownMenu,
+  DropdownMenuContent_default as DropdownMenuContent,
+  DropdownMenuContext,
+  DropdownMenuItem,
+  DropdownMenuNested_default as DropdownMenuNested,
+  DropdownMenuTrigger_default as DropdownMenuTrigger,
+  FetchError,
+  Alert as Flash,
+  Hightlight as Highlight,
+  Href_default as Href,
+  Input_default as Input,
+  InputField_default as InputField,
+  LazyAutocomplete,
+  Loader,
+  MenuItem_default as MenuItem,
+  MenuItemWithChildren_default as MenuItemWithChildren,
+  Modal,
+  ModalContent_default as ModalContent,
+  ModalContext,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTrigger_default as ModalTrigger,
+  NotificationsContext,
+  NotificationsProvider,
+  Popover,
+  PopoverContent_default as PopoverContent,
+  PopoverContext,
+  PopoverDescription,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger_default as PopoverTrigger,
+  Portal_default as Portal,
+  RadioGroup,
+  ResizeArea,
+  Scroll,
+  Select_default as Select,
+  SelectContext,
+  SelectOption,
+  SelectSelection,
+  SimpleAutocomplete,
+  SimpleTooltip,
+  Snack,
+  Sortable,
+  Step,
+  Steps,
+  Table,
+  Table2 as TableBody,
+  Table3 as TableCell,
+  Table7 as TableFooter,
+  Table4 as TableHeader,
+  Table5 as TableHeaderCell,
+  Table6 as TableRow,
+  Tabs,
+  Toggle_default as Toggle,
+  Tooltip,
+  TooltipContent_default as TooltipContent,
+  TooltipContext,
+  TooltipTrigger_default as TooltipTrigger,
+  arrayEquals,
+  buttonVariants,
+  cardConfig,
+  dialogVariants,
+  fetchAPI,
+  getIndexLetter,
+  getOptionLabel,
+  getOptionValue,
+  inputConfig,
+  isErrorLike,
+  parseError,
+  pentatrionTw_default as pentatrionTw,
+  useAutocomplete,
+  useCombinedRefs,
+  useCopyToClipboard,
+  useDebounce,
+  useDropdownMenu,
+  useDropdownMenuContext,
+  useEventCallback,
+  useEventListener,
+  useFetch,
+  useIsClosing,
+  useIsMounted,
+  useIsomorphicLayoutEffect,
+  useModal,
+  useModalContext,
+  useNotifications,
+  useOnClickOutside,
+  usePopover,
+  usePopoverContext,
+  usePrevious,
+  useRefDebounce,
+  useRipple,
+  useSelect,
+  useStateDebounce,
+  useTooltip,
+  useTooltipContext
+};