@underverse-ui/underverse 1.0.203 → 1.0.204

package/dist/chunk-NSBPE2FW.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __require,
+  __export
+};
+//# sourceMappingURL=chunk-NSBPE2FW.js.map

package/dist/chunk-NSBPE2FW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-QVQTWZ24.js

@@ -0,0 +1,199 @@
+import {
+  getPanelBorderRadiusClass,
+  useUnderverseUIConfig
+} from "./chunk-KFTYWTJR.js";
+import {
+  cn,
+  useGlobalI18n
+} from "./chunk-GSBRTFP2.js";
+
+// src/components/Modal.tsx
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl",
+  full: "max-w-full"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  children,
+  title,
+  description,
+  className,
+  contentClassName,
+  overlayClassName,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+  size = "md",
+  noPadding = false,
+  fullWidth = false,
+  width,
+  height,
+  borderMode
+}) => {
+  const gi18n = useGlobalI18n();
+  const globalConfig = useUnderverseUIConfig();
+  const resolvedBorderMode = borderMode ?? globalConfig.borderMode;
+  const [isMounted, setIsMounted] = React.useState(false);
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isAnimating, setIsAnimating] = React.useState(true);
+  const mouseDownTarget = React.useRef(null);
+  const modalContentRef = React.useRef(null);
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+  const animationRef = React.useRef(false);
+  React.useEffect(() => {
+    if (isOpen) {
+      if (animationRef.current) return;
+      animationRef.current = true;
+      setIsVisible(true);
+      setIsAnimating(true);
+      requestAnimationFrame(() => {
+        setIsAnimating(false);
+      });
+    } else {
+      animationRef.current = false;
+      if (isVisible) {
+        setIsAnimating(true);
+        const hideTimer = setTimeout(() => {
+          setIsVisible(false);
+        }, 200);
+        return () => clearTimeout(hideTimer);
+      }
+    }
+  }, [isOpen, isVisible]);
+  React.useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEsc, onClose]);
+  React.useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+  const isInsidePortal = (element) => {
+    if (!element) return false;
+    let current = element;
+    while (current) {
+      if (current.hasAttribute?.("data-datepicker") || current.hasAttribute?.("data-popover") || current.hasAttribute?.("data-dropdown") || current.hasAttribute?.("data-dropdown-menu") || current.hasAttribute?.("data-radix-popper-content-wrapper") || current.hasAttribute?.("data-radix-portal") || current.hasAttribute?.("data-tippy-root") || current.getAttribute?.("role") === "listbox" || current.getAttribute?.("role") === "dialog" || current.classList?.contains("datepicker-portal") || current.classList?.contains("popover-portal") || current.classList?.contains("tippy-box") || current.classList?.contains("tippy-content")) {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  };
+  const handleOverlayMouseDown = (event) => {
+    mouseDownTarget.current = event.target;
+  };
+  const handleOverlayMouseUp = (event) => {
+    const modalContent2 = modalContentRef.current;
+    const mouseDownTarget_ = mouseDownTarget.current;
+    const mouseUpTarget = event.target;
+    if (isInsidePortal(mouseDownTarget_) || isInsidePortal(mouseUpTarget)) {
+      mouseDownTarget.current = null;
+      return;
+    }
+    const mouseDownOutside = modalContent2 && !modalContent2.contains(mouseDownTarget_);
+    const mouseUpOutside = modalContent2 && !modalContent2.contains(mouseUpTarget);
+    if (closeOnOverlayClick && mouseDownOutside && mouseUpOutside) {
+      onClose();
+    }
+    mouseDownTarget.current = null;
+  };
+  if (!isMounted || !isOpen && !isVisible) {
+    return null;
+  }
+  const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles[size];
+  const modalContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-6", overlayClassName),
+      style: { overscrollBehavior: "contain" },
+      onMouseDown: handleOverlayMouseDown,
+      onMouseUp: handleOverlayMouseUp,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: modalContentRef,
+            className: cn(
+              "relative w-full border border-border/40 bg-card text-card-foreground shadow-xl",
+              resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : "rounded-2xl md:rounded-3xl",
+              "transition-all duration-200 ease-out",
+              maxWidthClass,
+              fullWidth && "mx-0",
+              className
+            ),
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0,
+              transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
+              // Thêm dòng này để tạo hiệu ứng nảy
+              transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
+              width,
+              height
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              (title || description || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+                  description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    "aria-label": gi18n.closeModal ?? "Close modal",
+                    className: cn(
+                      "rounded-lg opacity-70 ring-offset-background transition-opacity",
+                      "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "disabled:pointer-events-none "
+                    ),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 cursor-pointer", "aria-hidden": "true" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return typeof window !== "undefined" ? createPortal(modalContent, document.body) : null;
+};
+var Modal_default = Modal;
+
+export {
+  Modal_default
+};
+//# sourceMappingURL=chunk-QVQTWZ24.js.map

package/dist/chunk-QVQTWZ24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../utils/cn\";\nimport { X } from \"lucide-react\";\nimport { useGlobalI18n } from \"../contexts/GlobalI18nContext\";\nimport { getBorderRadiusClass, getPanelBorderRadiusClass, type BorderMode } from \"../utils/radius\";\nimport { useUnderverseUIConfig } from \"../contexts/UnderverseConfigContext\";\n\n/** Public props for the `Modal` component. */\ninterface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  title?: string;\n  description?: string;\n  className?: string;\n  contentClassName?: string;\n  overlayClassName?: string;\n  showCloseButton?: boolean;\n  closeOnOverlayClick?: boolean;\n  closeOnEsc?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  noPadding?: boolean;\n  fullWidth?: boolean;\n  width?: string | number;\n  height?: string | number;\n  borderMode?: BorderMode;\n}\n\nconst sizeStyles = {\n  sm: \"max-w-md\",\n  md: \"max-w-2xl\",\n  lg: \"max-w-4xl\",\n  xl: \"max-w-6xl\",\n  full: \"max-w-full\",\n};\n\nconst Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  children,\n  title,\n  description,\n  className,\n  contentClassName,\n  overlayClassName,\n  showCloseButton = true,\n  closeOnOverlayClick = true,\n  closeOnEsc = true,\n  size = \"md\",\n  noPadding = false,\n  fullWidth = false,\n  width,\n  height,\n  borderMode,\n}) => {\n  const gi18n = useGlobalI18n();\n  const globalConfig = useUnderverseUIConfig();\n  const resolvedBorderMode = borderMode ?? globalConfig.borderMode;\n  const [isMounted, setIsMounted] = React.useState(false);\n  const [isVisible, setIsVisible] = React.useState(false);\n  const [isAnimating, setIsAnimating] = React.useState(true);\n  // Track if mousedown started outside modal content\n  const mouseDownTarget = React.useRef<EventTarget | null>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setIsMounted(true);\n    return () => setIsMounted(false);\n  }, []);\n\n  // Ref to prevent double animation trigger in React StrictMode\n  const animationRef = React.useRef(false);\n\n  // Animation handling\n  React.useEffect(() => {\n    if (isOpen) {\n      if (animationRef.current) return; // Prevent double animation in StrictMode\n      animationRef.current = true;\n      setIsVisible(true);\n      setIsAnimating(true);\n      // Start animation on next frame\n      requestAnimationFrame(() => {\n        setIsAnimating(false);\n      });\n    } else {\n      animationRef.current = false;\n      if (isVisible) {\n        setIsAnimating(true);\n        // Hide after animation completes\n        const hideTimer = setTimeout(() => {\n          setIsVisible(false);\n        }, 200);\n        return () => clearTimeout(hideTimer);\n      }\n    }\n  }, [isOpen, isVisible]);\n\n  // Handle escape key\n  React.useEffect(() => {\n    if (!isOpen || !closeOnEsc) return;\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen, closeOnEsc, onClose]);\n\n  // Prevent body scroll when modal is open\n  React.useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"unset\";\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  // Check if an element is inside a portal (datepicker, popover, dropdown, etc.)\n  const isInsidePortal = (element: Node | null): boolean => {\n    if (!element) return false;\n    let current = element as HTMLElement | null;\n    while (current) {\n      // Check for common portal indicators (data attributes, z-index patterns)\n      if (\n        current.hasAttribute?.(\"data-datepicker\") ||\n        current.hasAttribute?.(\"data-popover\") ||\n        current.hasAttribute?.(\"data-dropdown\") ||\n        current.hasAttribute?.(\"data-dropdown-menu\") ||\n        current.hasAttribute?.(\"data-radix-popper-content-wrapper\") ||\n        current.hasAttribute?.(\"data-radix-portal\") ||\n        current.hasAttribute?.(\"data-tippy-root\") ||\n        current.getAttribute?.(\"role\") === \"listbox\" ||\n        current.getAttribute?.(\"role\") === \"dialog\" ||\n        current.classList?.contains(\"datepicker-portal\") ||\n        current.classList?.contains(\"popover-portal\") ||\n        current.classList?.contains(\"tippy-box\") ||\n        current.classList?.contains(\"tippy-content\")\n      ) {\n        return true;\n      }\n      current = current.parentElement;\n    }\n    return false;\n  };\n\n  const handleOverlayMouseDown = (event: React.MouseEvent) => {\n    // Store the mousedown target\n    mouseDownTarget.current = event.target;\n  };\n\n  const handleOverlayMouseUp = (event: React.MouseEvent) => {\n    // Check if both mousedown and mouseup occurred outside modal content\n    const modalContent = modalContentRef.current;\n    const mouseDownTarget_ = mouseDownTarget.current as Node;\n    const mouseUpTarget = event.target as Node;\n\n    // Don't close if clicking inside a portal element (datepicker, popover, etc.)\n    if (isInsidePortal(mouseDownTarget_) || isInsidePortal(mouseUpTarget)) {\n      mouseDownTarget.current = null;\n      return;\n    }\n\n    const mouseDownOutside = modalContent && !modalContent.contains(mouseDownTarget_);\n    const mouseUpOutside = modalContent && !modalContent.contains(mouseUpTarget);\n\n    if (closeOnOverlayClick && mouseDownOutside && mouseUpOutside) {\n      onClose();\n    }\n    mouseDownTarget.current = null;\n  };\n\n  if (!isMounted || (!isOpen && !isVisible)) {\n    return null;\n  }\n\n  const maxWidthClass = width ? \"max-w-none\" : fullWidth ? \"max-w-full\" : sizeStyles[size];\n\n  const modalContent = (\n    <div\n      className={cn(\"fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-6\", overlayClassName)}\n      style={{ overscrollBehavior: \"contain\" }}\n      onMouseDown={handleOverlayMouseDown}\n      onMouseUp={handleOverlayMouseUp}\n    >\n      {/* Overlay */}\n      <div\n        className=\"absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out\"\n        style={{\n          opacity: isOpen && !isAnimating ? 1 : 0,\n        }}\n      />\n\n      {/* Modal */}\n      <div\n        ref={modalContentRef}\n        className={cn(\n          \"relative w-full border border-border/40 bg-card text-card-foreground shadow-xl\",\n          resolvedBorderMode ? getPanelBorderRadiusClass(resolvedBorderMode) : \"rounded-2xl md:rounded-3xl\",\n          \"transition-all duration-200 ease-out\",\n          maxWidthClass,\n          fullWidth && \"mx-0\",\n          className,\n        )}\n        style={{\n          opacity: isOpen && !isAnimating ? 1 : 0,\n          transform: isOpen && !isAnimating ? \"scale(1)\" : \"scale(0.9)\",\n          // Thêm dòng này để tạo hiệu ứng nảy\n          transition: \"all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)\",\n          width,\n          height,\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Header */}\n        {(title || description || showCloseButton) && (\n          <div className=\"flex items-start justify-between p-6 pb-0\">\n            <div className=\"space-y-1.5\">\n              {title && <h2 className=\"text-lg font-semibold leading-none tracking-tight\">{title}</h2>}\n              {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n            </div>\n            {showCloseButton && (\n              <button\n                onClick={onClose}\n                aria-label={gi18n.closeModal ?? \"Close modal\"}\n                className={cn(\n                  \"rounded-lg opacity-70 ring-offset-background transition-opacity\",\n                  \"hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n                  \"disabled:pointer-events-none \",\n                )}\n              >\n                <X className=\"h-4 w-4 cursor-pointer\" aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n        )}\n\n        {/* Content */}\n        <div className={cn(\"p-6\", noPadding && \"p-0\", contentClassName)}>{children}</div>\n      </div>\n    </div>\n  );\n\n  return typeof window !== \"undefined\" ? createPortal(modalContent, document.body) : null;\n};\n\nexport default Modal;\n"],"mappings":"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","names":["modalContent"]}

package/dist/chunk-ZUAIBY2Z.js

@@ -0,0 +1,74 @@
+import {
+  cn
+} from "./chunk-GSBRTFP2.js";
+
+// src/components/emoji-ui.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+function formatEmojiName(name) {
+  return name.replaceAll("_", " ");
+}
+function formatEmojiCountLabel(template, shown, total) {
+  return template.replace("{shown}", String(shown)).replace("{total}", String(total));
+}
+function getEmojiUnifiedCode(emoji) {
+  const codePoints = [];
+  for (let i = 0; i < emoji.length; ) {
+    const codePoint = emoji.codePointAt(i);
+    if (codePoint === void 0) break;
+    let hex = codePoint.toString(16).toLowerCase();
+    if (hex.length < 4) {
+      hex = hex.padStart(4, "0");
+    }
+    codePoints.push(hex);
+    i += codePoint > 65535 ? 2 : 1;
+  }
+  return codePoints.join("-");
+}
+var globalEmojiBaseUrl = "/emojis";
+function setEmojiBaseUrl(url) {
+  globalEmojiBaseUrl = url.endsWith("/") ? url.slice(0, -1) : url;
+}
+function getEmojiImageUrl(unified) {
+  return `${globalEmojiBaseUrl}/${unified}.png`;
+}
+var EmojiGridButton = ({ emoji, name, onClick, className, active = false }) => {
+  const [hasError, setHasError] = React.useState(false);
+  const unified = React.useMemo(() => getEmojiUnifiedCode(emoji), [emoji]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": formatEmojiName(name),
+      title: formatEmojiName(name),
+      onClick,
+      className: cn(
+        "group flex h-9 w-9 items-center justify-center rounded-xl transition-all duration-300",
+        "bg-transparent hover:bg-primary/10 border border-transparent hover:border-primary/20",
+        "focus:outline-none focus:ring-2 focus:ring-primary/20",
+        "scale-100 hover:scale-110 active:scale-95",
+        active ? "bg-primary/15 border-primary/30 ring-2 ring-primary/20" : "",
+        className
+      ),
+      children: hasError ? /* @__PURE__ */ jsx("span", { className: "text-2xl transition-transform duration-300 group-hover:rotate-6", children: emoji }) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: getEmojiImageUrl(unified),
+          alt: emoji,
+          onError: () => setHasError(true),
+          className: "h-6.5 w-6.5 object-contain transition-all duration-300 group-hover:rotate-6 group-hover:drop-shadow-[0_2px_5px_rgba(0,0,0,0.15)]",
+          loading: "lazy"
+        }
+      )
+    }
+  );
+};
+
+export {
+  formatEmojiCountLabel,
+  getEmojiUnifiedCode,
+  setEmojiBaseUrl,
+  getEmojiImageUrl,
+  EmojiGridButton
+};
+//# sourceMappingURL=chunk-ZUAIBY2Z.js.map

package/dist/chunk-ZUAIBY2Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/emoji-ui.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport function formatEmojiName(name: string) {\n  return name.replaceAll(\"_\", \" \");\n}\n\nexport function formatEmojiCountLabel(template: string, shown: number, total: number) {\n  return template\n    .replace(\"{shown}\", String(shown))\n    .replace(\"{total}\", String(total));\n}\n\n/**\n * Converts a Unicode emoji string into a lowercase hyphenated hex code point format\n * used by emoji CDNs (e.g. \"😀\" -> \"1f600\", \"#️⃣\" -> \"0023-fe0f-20e3\").\n */\nexport function getEmojiUnifiedCode(emoji: string): string {\n  const codePoints = [];\n  for (let i = 0; i < emoji.length; ) {\n    const codePoint = emoji.codePointAt(i);\n    if (codePoint === undefined) break;\n    let hex = codePoint.toString(16).toLowerCase();\n    if (hex.length < 4) {\n      hex = hex.padStart(4, \"0\");\n    }\n    codePoints.push(hex);\n    i += codePoint > 0xffff ? 2 : 1;\n  }\n  return codePoints.join(\"-\");\n}\n\nlet globalEmojiBaseUrl = \"/emojis\";\n\n/**\n * Configure a custom base URL for loading emoji image assets (e.g. `/emojis` for local offline storage).\n * If not set, defaults to jsDelivr CDN.\n */\nexport function setEmojiBaseUrl(url: string) {\n  globalEmojiBaseUrl = url.endsWith(\"/\") ? url.slice(0, -1) : url;\n}\n\n/**\n * Resolves the final image URL for a given unified emoji code.\n */\nexport function getEmojiImageUrl(unified: string): string {\n  return `${globalEmojiBaseUrl}/${unified}.png`;\n}\n\nexport const EmojiGridButton: React.FC<{\n  emoji: string;\n  name: string;\n  onClick: () => void;\n  className?: string;\n  active?: boolean;\n}> = ({ emoji, name, onClick, className, active = false }) => {\n  const [hasError, setHasError] = React.useState(false);\n  const unified = React.useMemo(() => getEmojiUnifiedCode(emoji), [emoji]);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={formatEmojiName(name)}\n      title={formatEmojiName(name)}\n      onClick={onClick}\n      className={cn(\n        \"group flex h-9 w-9 items-center justify-center rounded-xl transition-all duration-300\",\n        \"bg-transparent hover:bg-primary/10 border border-transparent hover:border-primary/20\",\n        \"focus:outline-none focus:ring-2 focus:ring-primary/20\",\n        \"scale-100 hover:scale-110 active:scale-95\",\n        active ? \"bg-primary/15 border-primary/30 ring-2 ring-primary/20\" : \"\",\n        className,\n      )}\n    >\n      {hasError ? (\n        <span className=\"text-2xl transition-transform duration-300 group-hover:rotate-6\">{emoji}</span>\n      ) : (\n        <img\n          src={getEmojiImageUrl(unified)}\n          alt={emoji}\n          onError={() => setHasError(true)}\n          className=\"h-6.5 w-6.5 object-contain transition-all duration-300 group-hover:rotate-6 group-hover:drop-shadow-[0_2px_5px_rgba(0,0,0,0.15)]\"\n          loading=\"lazy\"\n        />\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;AAEA,OAAO,WAAW;AA2EV;AAxED,SAAS,gBAAgB,MAAc;AAC5C,SAAO,KAAK,WAAW,KAAK,GAAG;AACjC;AAEO,SAAS,sBAAsB,UAAkB,OAAe,OAAe;AACpF,SAAO,SACJ,QAAQ,WAAW,OAAO,KAAK,CAAC,EAChC,QAAQ,WAAW,OAAO,KAAK,CAAC;AACrC;AAMO,SAAS,oBAAoB,OAAuB;AACzD,QAAM,aAAa,CAAC;AACpB,WAAS,IAAI,GAAG,IAAI,MAAM,UAAU;AAClC,UAAM,YAAY,MAAM,YAAY,CAAC;AACrC,QAAI,cAAc,OAAW;AAC7B,QAAI,MAAM,UAAU,SAAS,EAAE,EAAE,YAAY;AAC7C,QAAI,IAAI,SAAS,GAAG;AAClB,YAAM,IAAI,SAAS,GAAG,GAAG;AAAA,IAC3B;AACA,eAAW,KAAK,GAAG;AACnB,SAAK,YAAY,QAAS,IAAI;AAAA,EAChC;AACA,SAAO,WAAW,KAAK,GAAG;AAC5B;AAEA,IAAI,qBAAqB;AAMlB,SAAS,gBAAgB,KAAa;AAC3C,uBAAqB,IAAI,SAAS,GAAG,IAAI,IAAI,MAAM,GAAG,EAAE,IAAI;AAC9D;AAKO,SAAS,iBAAiB,SAAyB;AACxD,SAAO,GAAG,kBAAkB,IAAI,OAAO;AACzC;AAEO,IAAM,kBAMR,CAAC,EAAE,OAAO,MAAM,SAAS,WAAW,SAAS,MAAM,MAAM;AAC5D,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,UAAU,MAAM,QAAQ,MAAM,oBAAoB,KAAK,GAAG,CAAC,KAAK,CAAC;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,gBAAgB,IAAI;AAAA,MAChC,OAAO,gBAAgB,IAAI;AAAA,MAC3B;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,2DAA2D;AAAA,QACpE;AAAA,MACF;AAAA,MAEC,qBACC,oBAAC,UAAK,WAAU,mEAAmE,iBAAM,IAEzF;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,iBAAiB,OAAO;AAAA,UAC7B,KAAK;AAAA,UACL,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,WAAU;AAAA,UACV,SAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/emojis-I5AMZ3EE.js

@@ -0,0 +1,8 @@
+import {
+  EMOJI_LIST
+} from "./chunk-4TYW5K4J.js";
+import "./chunk-NSBPE2FW.js";
+export {
+  EMOJI_LIST
+};
+//# sourceMappingURL=emojis-I5AMZ3EE.js.map

package/dist/emojis-I5AMZ3EE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}