@nice2dev/icons 1.3.15 → 1.3.16

package/dist/cjs/NtdIconBadge.js

@@ -1,396 +1,420 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var types = require('./types.js');
-
-/** The status in words for the accessible name — English defaults of `ntdIconBadge.statusValue.*`. */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const types = require("./types.js");
 const STATUS_WORDS = {
-    online: 'online',
-    offline: 'offline',
-    busy: 'busy',
-    away: 'away',
-    dnd: 'do not disturb',
-    invisible: 'invisible',
+  online: "online",
+  offline: "offline",
+  busy: "busy",
+  away: "away",
+  dnd: "do not disturb",
+  invisible: "invisible"
 };
-/* ────────────────────────────────────────────────────────────────────────────
-   CONSTANTS
-───────────────────────────────────────────────────────────────────────────── */
 const STATUS_COLORS = {
-    online: '#22c55e', // green-500
-    offline: '#6b7280', // gray-500
-    busy: '#ef4444', // red-500
-    away: '#f59e0b', // amber-500
-    dnd: '#ef4444', // red-500
-    invisible: '#9ca3af', // gray-400
+  online: "#22c55e",
+  // green-500
+  offline: "#6b7280",
+  // gray-500
+  busy: "#ef4444",
+  // red-500
+  away: "#f59e0b",
+  // amber-500
+  dnd: "#ef4444",
+  // red-500
+  invisible: "#9ca3af"
+  // gray-400
 };
 const POSITION_STYLES = {
-    'top-right': { top: 0, right: 0, transform: 'translate(40%, -40%)' },
-    'top-left': { top: 0, left: 0, transform: 'translate(-40%, -40%)' },
-    'bottom-right': { bottom: 0, right: 0, transform: 'translate(40%, 40%)' },
-    'bottom-left': { bottom: 0, left: 0, transform: 'translate(-40%, 40%)' },
-    'top-center': { top: 0, left: '50%', transform: 'translate(-50%, -50%)' },
-    'bottom-center': { bottom: 0, left: '50%', transform: 'translate(-50%, 50%)' },
-    'center-right': { top: '50%', right: 0, transform: 'translate(50%, -50%)' },
-    'center-left': { top: '50%', left: 0, transform: 'translate(-50%, -50%)' },
+  "top-right": { top: 0, right: 0, transform: "translate(40%, -40%)" },
+  "top-left": { top: 0, left: 0, transform: "translate(-40%, -40%)" },
+  "bottom-right": { bottom: 0, right: 0, transform: "translate(40%, 40%)" },
+  "bottom-left": { bottom: 0, left: 0, transform: "translate(-40%, 40%)" },
+  "top-center": { top: 0, left: "50%", transform: "translate(-50%, -50%)" },
+  "bottom-center": { bottom: 0, left: "50%", transform: "translate(-50%, 50%)" },
+  "center-right": { top: "50%", right: 0, transform: "translate(50%, -50%)" },
+  "center-left": { top: "50%", left: 0, transform: "translate(-50%, -50%)" }
 };
 const DOT_SIZES = {
-    sm: 6,
-    md: 8,
-    lg: 10,
+  sm: 6,
+  md: 8,
+  lg: 10
 };
-/* ────────────────────────────────────────────────────────────────────────────
-   STYLES
-───────────────────────────────────────────────────────────────────────────── */
-const badgeStyles = `
-.ntd-badge-container {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ntd-badge {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  line-height: 1;
-  white-space: nowrap;
-  border-radius: 9999px;
-  z-index: 1;
-}
-
-.ntd-badge--standard {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-}
-
-.ntd-badge--dot {
-  width: 8px;
-  height: 8px;
-  padding: 0;
-}
-
-.ntd-badge--pill {
-  min-width: 20px;
-  height: 16px;
-  padding: 0 6px;
-  font-size: 9px;
-}
-
-.ntd-badge--animated {
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-
-.ntd-badge--enter {
-  animation: ntd-badge-pop 0.3s ease-out;
-}
-
-@keyframes ntd-badge-pop {
-  0% { transform: scale(0); opacity: 0; }
-  50% { transform: scale(1.2); }
-  100% { transform: scale(1); opacity: 1; }
-}
-
-@keyframes ntd-badge-pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.1); opacity: 0.8; }
-}
-
-.ntd-badge--pulse {
-  animation: ntd-badge-pulse 1.5s ease-in-out infinite;
-}
-
-.ntd-status-dot {
-  position: absolute;
-  border-radius: 50%;
-  border: 2px solid white;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  z-index: 1;
-}
-
-.ntd-status-dot--animated {
-  transition: background-color 0.3s ease, transform 0.3s ease;
-}
-
-@keyframes ntd-status-pulse {
-  0%, 100% { 
-    box-shadow: 0 0 0 0 currentColor;
-  }
-  50% { 
-    box-shadow: 0 0 0 4px transparent;
-  }
-}
-
-.ntd-status-dot--pulse {
-  animation: ntd-status-pulse 2s ease-in-out infinite;
-}
-
-.ntd-icon-overlay {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-}
-
-.ntd-icon-overlay--circular {
-  border-radius: 50%;
-  padding: 2px;
-}
-
-@keyframes ntd-count-change {
-  0% { transform: scale(1); }
-  25% { transform: scale(1.3); }
-  50% { transform: scale(0.9); }
-  100% { transform: scale(1); }
-}
-
-.ntd-badge--count-change {
-  animation: ntd-count-change 0.3s ease-out;
-}
+const badgeStyles = `
+.ntd-badge-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ntd-badge {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  line-height: 1;
+  white-space: nowrap;
+  border-radius: 9999px;
+  z-index: 1;
+}
+
+.ntd-badge--standard {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+}
+
+.ntd-badge--dot {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+}
+
+.ntd-badge--pill {
+  min-width: 20px;
+  height: 16px;
+  padding: 0 6px;
+  font-size: 9px;
+}
+
+.ntd-badge--animated {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.ntd-badge--enter {
+  animation: ntd-badge-pop 0.3s ease-out;
+}
+
+@keyframes ntd-badge-pop {
+  0% { transform: scale(0); opacity: 0; }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes ntd-badge-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.1); opacity: 0.8; }
+}
+
+.ntd-badge--pulse {
+  animation: ntd-badge-pulse 1.5s ease-in-out infinite;
+}
+
+.ntd-status-dot {
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+
+.ntd-status-dot--animated {
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+@keyframes ntd-status-pulse {
+  0%, 100% { 
+    box-shadow: 0 0 0 0 currentColor;
+  }
+  50% { 
+    box-shadow: 0 0 0 4px transparent;
+  }
+}
+
+.ntd-status-dot--pulse {
+  animation: ntd-status-pulse 2s ease-in-out infinite;
+}
+
+.ntd-icon-overlay {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.ntd-icon-overlay--circular {
+  border-radius: 50%;
+  padding: 2px;
+}
+
+@keyframes ntd-count-change {
+  0% { transform: scale(1); }
+  25% { transform: scale(1.3); }
+  50% { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+.ntd-badge--count-change {
+  animation: ntd-count-change 0.3s ease-out;
+}
 `;
-// Inject styles
 let stylesInjected = false;
 function injectStyles() {
-    if (stylesInjected || typeof document === 'undefined') {
-        return;
-    }
-    const styleId = 'ntd-badge-styles';
-    if (!document.getElementById(styleId)) {
-        const styleEl = document.createElement('style');
-        styleEl.id = styleId;
-        styleEl.textContent = badgeStyles;
-        document.head.appendChild(styleEl);
-    }
-    stylesInjected = true;
+  if (stylesInjected || typeof document === "undefined") {
+    return;
+  }
+  const styleId = "ntd-badge-styles";
+  if (!document.getElementById(styleId)) {
+    const styleEl = document.createElement("style");
+    styleEl.id = styleId;
+    styleEl.textContent = badgeStyles;
+    document.head.appendChild(styleEl);
+  }
+  stylesInjected = true;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   NtdBadge COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Badge overlay component for icons with notification counts.
- *
- * @example
- * ```tsx
- * // Basic notification badge
- * <NtdBadge icon={NtdBell} count={3} />
- *
- * // Large count with max
- * <NtdBadge icon={NtdInbox} count={150} maxCount={99} />
- *
- * // Pulsing badge
- * <NtdBadge icon={NtdMessage} count={1} pulse />
- *
- * // Custom colors
- * <NtdBadge
- *   icon={NtdHeart}
- *   count={5}
- *   badgeColor="#e91e63"
- *   textColor="white"
- * />
- * ```
- */
 const NtdBadge = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ icon: Icon, count = 0, maxCount = 99, showZero = false, position = 'top-right', variant = 'standard', badgeColor = '#ef4444', textColor = '#ffffff', animated = true, pulse = false, iconProps = {}, className, style, 'aria-label': ariaLabel, }, ref) => {
-    var _a, _b;
-    const { t } = uiCore.useNiceTranslation();
-    const [isEntering, setIsEntering] = React.useState(false);
-    const [countChanging, setCountChanging] = React.useState(false);
-    const prevCountRef = React.useRef(count);
-    React.useEffect(() => {
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      icon: Icon,
+      count = 0,
+      maxCount = 99,
+      showZero = false,
+      position = "top-right",
+      variant = "standard",
+      badgeColor = "#ef4444",
+      textColor = "#ffffff",
+      animated = true,
+      pulse = false,
+      iconProps = {},
+      className,
+      style,
+      "aria-label": ariaLabel
+    }, ref) => {
+      const { t } = uiCore.useNiceTranslation();
+      const [isEntering, setIsEntering] = React.useState(false);
+      const [countChanging, setCountChanging] = React.useState(false);
+      const prevCountRef = React.useRef(count);
+      React.useEffect(() => {
         injectStyles();
-    }, []);
-    // Handle count change animation
-    React.useEffect(() => {
+      }, []);
+      React.useEffect(() => {
         if (animated && prevCountRef.current !== count && count > 0) {
-            setCountChanging(true);
-            const timer = setTimeout(() => setCountChanging(false), 300);
-            prevCountRef.current = count;
-            return () => clearTimeout(timer);
+          setCountChanging(true);
+          const timer = setTimeout(() => setCountChanging(false), 300);
+          prevCountRef.current = count;
+          return () => clearTimeout(timer);
         }
         prevCountRef.current = count;
-    }, [count, animated]);
-    // Handle enter animation
-    React.useEffect(() => {
+      }, [count, animated]);
+      React.useEffect(() => {
         if (animated && count > 0) {
-            setIsEntering(true);
-            const timer = setTimeout(() => setIsEntering(false), 300);
-            return () => clearTimeout(timer);
+          setIsEntering(true);
+          const timer = setTimeout(() => setIsEntering(false), 300);
+          return () => clearTimeout(timer);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- the enter animation plays once, when the badge mounts
-    }, []);
-    const shouldShowBadge = count > 0 || showZero;
-    const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
-    const resolvedSize = typeof iconProps.size === 'number'
-        ? iconProps.size
-        : ((_b = types.SIZE_MAP[(_a = iconProps.size) !== null && _a !== void 0 ? _a : 'md']) !== null && _b !== void 0 ? _b : 24);
-    const badgeClasses = [
-        'ntd-badge',
+      }, []);
+      const shouldShowBadge = count > 0 || showZero;
+      const displayCount = count > maxCount ? `${maxCount}+` : count.toString();
+      const resolvedSize = typeof iconProps.size === "number" ? iconProps.size : types.SIZE_MAP[iconProps.size ?? "md"] ?? 24;
+      const badgeClasses = [
+        "ntd-badge",
         `ntd-badge--${variant}`,
-        animated && 'ntd-badge--animated',
-        isEntering && 'ntd-badge--enter',
-        countChanging && 'ntd-badge--count-change',
-        pulse && 'ntd-badge--pulse',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (jsxRuntime.jsxs("div", { ref: ref, className: `ntd-badge-container ${className !== null && className !== void 0 ? className : ''}`, style: {
+        animated && "ntd-badge--animated",
+        isEntering && "ntd-badge--enter",
+        countChanging && "ntd-badge--count-change",
+        pulse && "ntd-badge--pulse"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: `ntd-badge-container ${className ?? ""}`,
+          style: {
             width: resolvedSize,
             height: resolvedSize,
-            ...style,
-        }, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (shouldShowBadge
-            ? t('ntdIconBadge.notifications', '{count} notifications').replace('{count}', String(count))
-            : undefined), children: [jsxRuntime.jsx(Icon, { ...iconProps }), shouldShowBadge && (jsxRuntime.jsx("span", { className: badgeClasses, style: {
-                    ...POSITION_STYLES[position],
-                    backgroundColor: badgeColor,
-                    color: textColor,
-                }, "aria-hidden": "true", children: variant !== 'dot' && displayCount }))] }));
-}), { displayName: 'NtdBadge' });
-/* ────────────────────────────────────────────────────────────────────────────
-   NtdStatusDot COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Status indicator dot overlay for icons.
- *
- * @example
- * ```tsx
- * // Online status
- * <NtdStatusDot icon={NtdUser} status="online" />
- *
- * // Busy with pulse
- * <NtdStatusDot icon={NtdUser} status="busy" pulse />
- *
- * // Custom position
- * <NtdStatusDot icon={NtdUser} status="away" position="bottom-right" />
- * ```
- */
+            ...style
+          },
+          "aria-label": ariaLabel ?? (shouldShowBadge ? t("ntdIconBadge.notifications", "{count} notifications").replace(
+            "{count}",
+            String(count)
+          ) : void 0),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps }),
+            shouldShowBadge && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: badgeClasses,
+                style: {
+                  ...POSITION_STYLES[position],
+                  backgroundColor: badgeColor,
+                  color: textColor
+                },
+                "aria-hidden": "true",
+                children: variant !== "dot" && displayCount
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdBadge" }
+);
 const NtdStatusDot = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ icon: Icon, status, statusColor, position = 'bottom-right', dotSize = 'md', animated = true, pulse = false, iconProps = {}, className, style, }, ref) => {
-    var _a, _b, _c;
-    const { t } = uiCore.useNiceTranslation();
-    React.useEffect(() => {
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      icon: Icon,
+      status,
+      statusColor,
+      position = "bottom-right",
+      dotSize = "md",
+      animated = true,
+      pulse = false,
+      iconProps = {},
+      className,
+      style
+    }, ref) => {
+      const { t } = uiCore.useNiceTranslation();
+      React.useEffect(() => {
         injectStyles();
-    }, []);
-    const resolvedColor = statusColor !== null && statusColor !== void 0 ? statusColor : STATUS_COLORS[status];
-    const resolvedDotSize = DOT_SIZES[dotSize];
-    const resolvedIconSize = typeof iconProps.size === 'number'
-        ? iconProps.size
-        : ((_b = types.SIZE_MAP[(_a = iconProps.size) !== null && _a !== void 0 ? _a : 'md']) !== null && _b !== void 0 ? _b : 24);
-    const dotClasses = [
-        'ntd-status-dot',
-        animated && 'ntd-status-dot--animated',
-        pulse && status === 'online' && 'ntd-status-dot--pulse',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (jsxRuntime.jsxs("div", { ref: ref, className: `ntd-badge-container ${className !== null && className !== void 0 ? className : ''}`, style: {
+      }, []);
+      const resolvedColor = statusColor ?? STATUS_COLORS[status];
+      const resolvedDotSize = DOT_SIZES[dotSize];
+      const resolvedIconSize = typeof iconProps.size === "number" ? iconProps.size : types.SIZE_MAP[iconProps.size ?? "md"] ?? 24;
+      const dotClasses = [
+        "ntd-status-dot",
+        animated && "ntd-status-dot--animated",
+        pulse && status === "online" && "ntd-status-dot--pulse"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: `ntd-badge-container ${className ?? ""}`,
+          style: {
             width: resolvedIconSize,
             height: resolvedIconSize,
-            ...style,
-        }, role: "status", "aria-label": t('ntdIconBadge.status', 'Status: {status}').replace('{status}', t('ntdIconBadge.statusValue.' + status, (_c = STATUS_WORDS[status]) !== null && _c !== void 0 ? _c : status)), children: [jsxRuntime.jsx(Icon, { ...iconProps }), jsxRuntime.jsx("span", { className: dotClasses, style: {
-                    ...POSITION_STYLES[position],
-                    width: resolvedDotSize,
-                    height: resolvedDotSize,
-                    backgroundColor: resolvedColor,
-                    color: resolvedColor,
-                }, "aria-hidden": "true" })] }));
-}), { displayName: 'NtdStatusDot' });
-/* ────────────────────────────────────────────────────────────────────────────
-   NtdIconOverlay COMPONENT
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Generic overlay component for composing icons.
- *
- * @example
- * ```tsx
- * // Folder with plus
- * <NtdIconOverlay
- *   icon={NtdFolder}
- *   overlay={<NtdPlus size="xs" />}
- *   position="bottom-right"
- * />
- *
- * // With circular background
- * <NtdIconOverlay
- *   icon={NtdUser}
- *   overlay={<NtdCheck size="xs" primaryColor="white" />}
- *   circularBg
- *   overlayBg="#22c55e"
- * />
- * ```
- */
+            ...style
+          },
+          role: "status",
+          "aria-label": t("ntdIconBadge.status", "Status: {status}").replace(
+            "{status}",
+            t("ntdIconBadge.statusValue." + status, STATUS_WORDS[status] ?? status)
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: dotClasses,
+                style: {
+                  ...POSITION_STYLES[position],
+                  width: resolvedDotSize,
+                  height: resolvedDotSize,
+                  backgroundColor: resolvedColor,
+                  color: resolvedColor
+                },
+                "aria-hidden": "true"
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdStatusDot" }
+);
 const NtdIconOverlay = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ icon: Icon, overlay, position = 'bottom-right', overlayScale = 0.5, overlayBg, circularBg = false, iconProps = {}, className, style, }, ref) => {
-    var _a, _b;
-    React.useEffect(() => {
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      icon: Icon,
+      overlay,
+      position = "bottom-right",
+      overlayScale = 0.5,
+      overlayBg,
+      circularBg = false,
+      iconProps = {},
+      className,
+      style
+    }, ref) => {
+      React.useEffect(() => {
         injectStyles();
-    }, []);
-    const resolvedIconSize = typeof iconProps.size === 'number'
-        ? iconProps.size
-        : ((_b = types.SIZE_MAP[(_a = iconProps.size) !== null && _a !== void 0 ? _a : 'md']) !== null && _b !== void 0 ? _b : 24);
-    const overlaySize = resolvedIconSize * overlayScale;
-    const overlayClasses = ['ntd-icon-overlay', circularBg && 'ntd-icon-overlay--circular']
-        .filter(Boolean)
-        .join(' ');
-    return (jsxRuntime.jsxs("div", { ref: ref, className: `ntd-badge-container ${className !== null && className !== void 0 ? className : ''}`, style: {
+      }, []);
+      const resolvedIconSize = typeof iconProps.size === "number" ? iconProps.size : types.SIZE_MAP[iconProps.size ?? "md"] ?? 24;
+      const overlaySize = resolvedIconSize * overlayScale;
+      const overlayClasses = ["ntd-icon-overlay", circularBg && "ntd-icon-overlay--circular"].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: `ntd-badge-container ${className ?? ""}`,
+          style: {
             width: resolvedIconSize,
             height: resolvedIconSize,
-            ...style,
-        }, children: [jsxRuntime.jsx(Icon, { ...iconProps }), jsxRuntime.jsx("div", { className: overlayClasses, style: {
-                    ...POSITION_STYLES[position],
-                    width: overlaySize,
-                    height: overlaySize,
-                    backgroundColor: overlayBg,
-                }, children: overlay })] }));
-}), { displayName: 'NtdIconOverlay' });
-/**
- * Stack two icons for composite imagery.
- *
- * @example
- * ```tsx
- * // Folder with star
- * <NtdIconStack
- *   base={NtdFolder}
- *   overlay={NtdStar}
- *   overlayProps={{ primaryColor: '#fbbf24' }}
- * />
- *
- * // Ban overlay (slash through)
- * <NtdIconStack
- *   base={NtdCamera}
- *   overlay={NtdSlash}
- *   overlayProps={{ primaryColor: '#ef4444' }}
- *   position="center"
- * />
- * ```
- */
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...iconProps }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: overlayClasses,
+                style: {
+                  ...POSITION_STYLES[position],
+                  width: overlaySize,
+                  height: overlaySize,
+                  backgroundColor: overlayBg
+                },
+                children: overlay
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdIconOverlay" }
+);
 const NtdIconStack = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.forwardRef(({ base: BaseIcon, overlay: OverlayIcon, baseProps = {}, overlayProps = {}, position = 'bottom-right', overlayScale = 0.6, size, className, style, }, ref) => {
-    var _a, _b, _c;
-    const resolvedSize = size
-        ? typeof size === 'number'
-            ? size
-            : ((_a = types.SIZE_MAP[size]) !== null && _a !== void 0 ? _a : 24)
-        : typeof baseProps.size === 'number'
-            ? baseProps.size
-            : ((_c = types.SIZE_MAP[(_b = baseProps.size) !== null && _b !== void 0 ? _b : 'md']) !== null && _c !== void 0 ? _c : 24);
-    const overlaySize = Math.round(resolvedSize * overlayScale);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: `ntd-badge-container ${className !== null && className !== void 0 ? className : ''}`, style: {
+  /* @__PURE__ */ React.forwardRef(
+    ({
+      base: BaseIcon,
+      overlay: OverlayIcon,
+      baseProps = {},
+      overlayProps = {},
+      position = "bottom-right",
+      overlayScale = 0.6,
+      size,
+      className,
+      style
+    }, ref) => {
+      const resolvedSize = size ? typeof size === "number" ? size : types.SIZE_MAP[size] ?? 24 : typeof baseProps.size === "number" ? baseProps.size : types.SIZE_MAP[baseProps.size ?? "md"] ?? 24;
+      const overlaySize = Math.round(resolvedSize * overlayScale);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: `ntd-badge-container ${className ?? ""}`,
+          style: {
             width: resolvedSize,
             height: resolvedSize,
-            ...style,
-        }, children: [jsxRuntime.jsx(BaseIcon, { ...baseProps, size: resolvedSize }), jsxRuntime.jsx("div", { className: "ntd-icon-overlay", style: {
-                    ...POSITION_STYLES[position],
-                }, children: jsxRuntime.jsx(OverlayIcon, { ...overlayProps, size: overlaySize }) })] }));
-}), { displayName: 'NtdIconStack' });
-
+            ...style
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(BaseIcon, { ...baseProps, size: resolvedSize }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "ntd-icon-overlay",
+                style: {
+                  ...POSITION_STYLES[position]
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(OverlayIcon, { ...overlayProps, size: overlaySize })
+              }
+            )
+          ]
+        }
+      );
+    }
+  ),
+  { displayName: "NtdIconStack" }
+);
 exports.NtdBadge = NtdBadge;
 exports.NtdIconOverlay = NtdIconOverlay;
 exports.NtdIconStack = NtdIconStack;