elseware-ui 3.0.11 → 3.0.13

package/dist/index.js

@@ -3,13 +3,13 @@
 var React26 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var tailwindMerge = require('tailwind-merge');
-var index_js$1 = require('react-icons/ai/index.js');
+var index_js = require('react-icons/ai/index.js');
 var formik = require('formik');
 var index_js$2 = require('react-icons/fa/index.js');
 var classNames69 = require('classnames');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var cloudinaryReact = require('cloudinary-react');
-var index_js = require('react-icons/md/index.js');
+var index_js$1 = require('react-icons/md/index.js');
 var index_js$3 = require('react-icons/bs/index.js');
 var framerMotion = require('framer-motion');
 var recharts = require('recharts');
@@ -5596,6 +5596,11 @@ var isMatch = (itemPath, currentPath) => {
 };
 
 // src/utils/styles.ts
+function extractTextColorClasses(className) {
+  return className.split(/\s+/).filter(
+    (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
+  ).join(" ");
+}
 function resolveAppearanceStyles({
   appearance = "solid",
   variant = "default",
@@ -6249,14 +6254,6 @@ var toastShapeStyles = {
 };
 
 // src/components/data-entry/button/base/Button.styles.ts
-var buttonShapes = shapes;
-var buttonIconSizes = {
-  xs: 14,
-  sm: 16,
-  md: 18,
-  lg: 20,
-  xl: 22
-};
 function resolveButtonVariantStyles({
   appearance,
   variant
@@ -6270,108 +6267,171 @@ function resolveButtonVariantStyles({
   });
 }
 
-// src/components/data-entry/button/web/Button.web.styles.ts
-var webButtonSizes = {
-  xs: "px-2 py-1 text-xs",
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-5 py-3 text-lg",
-  xl: "px-6 py-4 text-xl"
+// src/components/data-entry/button/base/Button.tokens.ts
+var buttonSizeTokens = {
+  xs: {
+    padding: "px-2 py-1",
+    text: "text-xs",
+    icon: 14,
+    minHeight: "min-h-[30px]",
+    leading: "leading-[14px]",
+    slot: "h-[14px] w-[14px]"
+  },
+  sm: {
+    padding: "px-3 py-1.5",
+    text: "text-sm",
+    icon: 16,
+    minHeight: "min-h-9",
+    leading: "leading-4",
+    slot: "h-4 w-4"
+  },
+  md: {
+    padding: "px-4 py-2",
+    text: "text-base",
+    icon: 18,
+    minHeight: "min-h-11",
+    leading: "leading-[18px]",
+    slot: "h-[18px] w-[18px]"
+  },
+  lg: {
+    padding: "px-5 py-3",
+    text: "text-lg",
+    icon: 20,
+    minHeight: "min-h-[50px]",
+    leading: "leading-5",
+    slot: "h-5 w-5"
+  },
+  xl: {
+    padding: "px-6 py-4",
+    text: "text-xl",
+    icon: 22,
+    minHeight: "min-h-14",
+    leading: "leading-[22px]",
+    slot: "h-[22px] w-[22px]"
+  }
 };
-function Button({
-  type: type2 = "button",
-  icon,
-  text: text10,
-  children: children3,
-  loading = false,
-  disabled = false,
-  block = false,
-  compact = false,
-  glow = true,
-  mode,
-  contentClassName,
-  labelClassName,
-  variant,
-  appearance,
-  shape,
-  size,
-  accessibilityLabel,
-  accessibilityRole,
-  accessibilityState,
-  testID,
-  className,
-  onMouseMove,
-  onClick,
-  onPress,
-  ...rest
-}) {
-  const accessibility = accessibilityState;
+var buttonShapes = shapes;
+var buttonTextModeClassName = "border-transparent bg-transparent";
+
+// src/components/data-entry/button/base/useButton.ts
+function useButton(props) {
   const {
-    shape: resolvedShape,
-    size: resolvedSize,
-    variant: resolvedVariant,
-    appearance: resolvedAppearance
-  } = useResolvedButtonConfig({
-    compact,
+    // Consumed by the shared model
+    icon,
+    text: text10,
+    children: children3,
+    loading = false,
+    disabled = false,
+    block = false,
+    compact = false,
     mode,
     variant,
     appearance,
     shape,
-    size
-  });
-  const btnRef = React26.useRef(null);
-  const variantStyles = resolveButtonVariantStyles({
+    size,
+    accessibilityState,
+    onPress,
+    // Owned by the platform views — pulled out here only so `rootRest` is a
+    // clean pass-through (no library props leak onto the DOM / native root).
+    type: _type,
+    glow: _glow,
+    className: _className,
+    contentClassName: _contentClassName,
+    labelClassName: _labelClassName,
+    accessibilityLabel: _accessibilityLabel,
+    accessibilityRole: _accessibilityRole,
+    testID: _testID,
+    onClick: _onClick,
+    onMouseMove: _onMouseMove,
+    ...rootRest
+  } = props;
+  const { shape: resolvedShape, size: resolvedSize, variant: resolvedVariant, appearance: resolvedAppearance } = useResolvedButtonConfig({ compact, mode, variant, appearance, shape, size });
+  const tokens = buttonSizeTokens[resolvedSize];
+  const variantClassName = resolveButtonVariantStyles({
     appearance: resolvedAppearance,
     variant: resolvedVariant
   });
-  const iconSize = buttonIconSizes[resolvedSize];
-  const labelContent = text10 || children3;
-  const resolvedIcon = typeof icon === "function" ? icon({
-    color: "currentColor",
-    size: iconSize
-  }) : icon;
+  const label = text10 ?? children3;
+  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: tokens.icon }) : icon;
+  const isBusy = disabled || loading;
+  return {
+    size: resolvedSize,
+    shape: resolvedShape,
+    tokens,
+    isBusy,
+    isInteractive: !isBusy,
+    isTextMode: mode === "text",
+    block,
+    loading,
+    iconSize: tokens.icon,
+    icon: resolvedIcon,
+    label,
+    hasTextLabel: typeof label === "string" || typeof label === "number",
+    variantClassName,
+    shapeClassName: buttonShapes[resolvedShape],
+    labelColorClassName: extractTextColorClasses(variantClassName),
+    selected: accessibilityState?.selected,
+    onPress,
+    rootRest
+  };
+}
+var WEB_ROOT = "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300";
+var Button = React26.forwardRef(function Button2(props, ref) {
+  const {
+    type: type2 = "button",
+    glow = true,
+    className,
+    contentClassName,
+    labelClassName,
+    accessibilityLabel,
+    accessibilityRole,
+    testID,
+    onClick,
+    onMouseMove
+  } = props;
+  const model = useButton(props);
+  const localRef = React26.useRef(null);
+  const setRef = (node2) => {
+    localRef.current = node2;
+    if (typeof ref === "function") ref(node2);
+    else if (ref) ref.current = node2;
+  };
   const handleMouseMove = (e) => {
-    const btn = btnRef.current;
-    if (!btn || !glow) {
-      onMouseMove?.(e);
-      return;
+    const btn = localRef.current;
+    if (btn && glow) {
+      const rect = btn.getBoundingClientRect();
+      btn.style.setProperty("--glow-x", `${e.clientX - rect.left}px`);
+      btn.style.setProperty("--glow-y", `${e.clientY - rect.top}px`);
     }
-    const rect = btn.getBoundingClientRect();
-    const x3 = e.clientX - rect.left;
-    const y3 = e.clientY - rect.top;
-    btn.style.setProperty("--glow-x", `${x3}px`);
-    btn.style.setProperty("--glow-y", `${y3}px`);
     onMouseMove?.(e);
   };
   const handleClick = (e) => {
     onClick?.(e);
-    if (!e.defaultPrevented) {
-      onPress?.();
-    }
+    if (!e.defaultPrevented) model.onPress?.();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      ...rest,
-      ref: btnRef,
+      ...model.rootRest,
+      ref: setRef,
       type: type2,
-      disabled: disabled || loading,
+      disabled: model.isBusy,
       onClick: handleClick,
       onMouseMove: handleMouseMove,
-      "aria-disabled": disabled || loading,
+      "aria-disabled": model.isBusy,
       "aria-label": accessibilityLabel,
-      "aria-pressed": accessibility?.selected === void 0 ? void 0 : Boolean(accessibility.selected),
+      "aria-pressed": model.selected,
       "data-testid": testID,
       role: accessibilityRole,
       className: cn(
-        "relative overflow-hidden group inline-flex items-center justify-center gap-2 transition-all duration-300",
-        variantStyles,
-        buttonShapes[resolvedShape],
-        webButtonSizes[resolvedSize],
-        block && "w-full",
-        mode === "text" && "border-transparent bg-transparent",
-        (loading || disabled) && "brightness-75 grayscale cursor-not-allowed",
-        !loading && !disabled && "hover:cursor-pointer",
+        WEB_ROOT,
+        model.variantClassName,
+        model.shapeClassName,
+        model.tokens.padding,
+        model.tokens.text,
+        model.block && "w-full",
+        model.isTextMode && buttonTextModeClassName,
+        model.isBusy ? "brightness-75 grayscale cursor-not-allowed" : "hover:cursor-pointer",
         className
       ),
       children: [
@@ -6380,49 +6440,37 @@ function Button({
           {
             className: "pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300",
             style: {
-              background: `
-              radial-gradient(
-                200px circle at var(--glow-x) var(--glow-y),
-                rgba(255,255,255,0.18),
-                transparent 50%
-              )
-            `
+              background: "radial-gradient(200px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.18), transparent 50%)"
             }
           }
         ),
-        loading && /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin z-10" }),
-        resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+        model.loading && /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin z-10" }),
+        model.icon && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: cn(
               "z-10 inline-flex shrink-0 items-center justify-center leading-none",
               contentClassName
             ),
-            style: {
-              height: iconSize,
-              lineHeight: 0,
-              width: iconSize
-            },
-            children: resolvedIcon
+            style: { height: model.iconSize, width: model.iconSize, lineHeight: 0 },
+            children: model.icon
           }
         ),
-        labelContent && /* @__PURE__ */ jsxRuntime.jsx(
+        model.label != null && model.label !== "" && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: cn(
               "z-10 inline-flex items-center justify-center leading-none",
               labelClassName
             ),
-            style: {
-              minHeight: iconSize
-            },
-            children: labelContent
+            style: { minHeight: model.iconSize },
+            children: model.label
           }
         )
       ]
     }
   );
-}
+});
 var Button_web_default = Button;
 
 // src/data/styles/shared.styles.tsx
@@ -8640,7 +8688,7 @@ var ImageInput = React26.forwardRef(
               }),
               htmlFor: `${field.name}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl text-gray-300 group-hover:text-gray-400", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-bold text-gray-500 group-hover:text-gray-500", children: title })
               ]
             }
@@ -8656,7 +8704,7 @@ var ImageInput = React26.forwardRef(
         ) }),
         loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-[300px] bg-black opacity-50" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
         ] }),
         !loading && url && /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url, alt: url ? url : "image" }),
         (preview || url) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 text-3xl", children: [
@@ -8666,7 +8714,7 @@ var ImageInput = React26.forwardRef(
               className: " text-green-600 hover:cursor-pointer",
               onClick: uploadImage,
               hidden: url ? true : false,
-              children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDone, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDone, {})
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -8674,7 +8722,7 @@ var ImageInput = React26.forwardRef(
             {
               className: "text-red-500 hover:cursor-pointer",
               onClick: handleResetClick,
-              children: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineRemoveCircleOutline, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineRemoveCircleOutline, {})
             }
           )
         ] })
@@ -8830,7 +8878,7 @@ function MultiImageInput({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ImageView, { imageUrl: url }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-2 top-2 inline-flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(index_js.MdDragIndicator, {}),
+                /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdDragIndicator, {}),
                 index3 + 1
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-2 top-2 flex gap-1", children: [
@@ -8841,7 +8889,7 @@ function MultiImageInput({
                     accessibilityLabel: "Move image left",
                     disabled: index3 === 0 || isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowLeft, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowLeft, {}),
                     onPress: () => moveImage(index3, index3 - 1),
                     size: "xs",
                     className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8854,7 +8902,7 @@ function MultiImageInput({
                     accessibilityLabel: "Move image right",
                     disabled: index3 === imageUrls.length - 1 || isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdKeyboardArrowRight, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdKeyboardArrowRight, {}),
                     onPress: () => moveImage(index3, index3 + 1),
                     size: "xs",
                     className: "h-8 w-8 bg-black/60 p-0 text-xl text-white hover:bg-black/80 disabled:opacity-40"
@@ -8884,7 +8932,7 @@ function MultiImageInput({
                     accessibilityLabel: "Change image",
                     disabled: isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdUpload, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdUpload, {}),
                     onPress: () => openReplacePicker(index3),
                     size: "sm",
                     text: "Change",
@@ -8899,14 +8947,14 @@ function MultiImageInput({
                     accessibilityLabel: "Delete image",
                     disabled: isOrganizerBusy,
                     glow: false,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js.MdOutlineDelete, {}),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.MdOutlineDelete, {}),
                     onPress: () => removeImage(index3),
                     size: "sm",
                     variant: "danger"
                   }
                 )
               ] }),
-              isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js$1.AiOutlineLoading, { className: "animate-spin" }) })
+              isReplacing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 text-2xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(index_js.AiOutlineLoading, { className: "animate-spin" }) })
             ]
           },
           `${url}-${index3}`
@@ -31450,7 +31498,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -32802,7 +32850,16 @@ function Sidebar({
   ) }) });
 }
 var Sidebar_default = Sidebar;
+var TNThemeContext = React26.createContext({
+  components: {},
+  classNames: {}
+});
+var TNThemeProvider = TNThemeContext.Provider;
+var useTNTheme = () => React26.useContext(TNThemeContext);
+var useTNSlot = (slot) => React26.useContext(TNThemeContext).classNames?.[slot];
 var TNContext = ({ icon, name: name2, badge }) => {
+  const iconSlot = useTNSlot("icon");
+  const labelSlot = useTNSlot("label");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -32810,7 +32867,8 @@ var TNContext = ({ icon, name: name2, badge }) => {
         className: cn(
           "text-base text-gray-500 dark:text-gray-400",
           "transition-colors duration-200",
-          "group-hover:text-eui-secondary-700"
+          "group-hover:text-eui-secondary-700",
+          iconSlot
         ),
         children: icon
       }
@@ -32821,7 +32879,8 @@ var TNContext = ({ icon, name: name2, badge }) => {
         className: cn(
           "flex-1",
           "transition-colors duration-200",
-          "group-hover:text-eui-secondary-700"
+          "group-hover:text-eui-secondary-700",
+          labelSlot
         ),
         children: name2
       }
@@ -32838,6 +32897,8 @@ var TNItem = ({
   className,
   ...rest
 }) => {
+  const itemSlot = useTNSlot("item");
+  const selectedSlot = useTNSlot("itemSelected");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -32849,7 +32910,9 @@ var TNItem = ({
         "transition-all duration-200",
         "text-gray-400",
         "hover:bg-gray-300/10",
+        itemSlot,
         selected && "bg-gray-300/10",
+        selected && selectedSlot,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(TNContext, { icon, name: name2, badge })
@@ -32865,6 +32928,7 @@ var TNDropdownItem = ({
   onClick,
   className
 }) => {
+  const dropdownItemSlot = useTNSlot("dropdownItem");
   const handle2 = (e) => {
     if (to) {
       navigate ? navigate(to) : window.location.href = to;
@@ -32883,6 +32947,7 @@ var TNDropdownItem = ({
         "hover:bg-gray-100 dark:hover:bg-gray-700/50",
         "hover:text-gray-900 dark:hover:text-gray-300",
         "transition-colors duration-200",
+        dropdownItemSlot,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(TNContext, { icon, name: name2, badge })
@@ -32890,12 +32955,14 @@ var TNDropdownItem = ({
   );
 };
 var TNDropdownTitle = ({ name: name2, className }) => {
+  const dropdownTitleSlot = useTNSlot("dropdownTitle");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         "px-3 py-4 text-xs font-semibold uppercase tracking-wide",
         "text-gray-500 dark:text-gray-600",
+        dropdownTitleSlot,
         className
       ),
       children: name2
@@ -32908,9 +32975,14 @@ var TNDropdownGroup = ({
   badge,
   items,
   navigate,
+  components,
   className
 }) => {
   const [open, setOpen] = React26.useState(true);
+  const dropdownGroupSlot = useTNSlot("dropdownGroup");
+  const Item = components?.dropdownItem || TNDropdownItem;
+  const Group = components?.dropdownGroup || TNDropdownGroup;
+  const Title = components?.dropdownTitle || TNDropdownTitle;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -32925,6 +32997,7 @@ var TNDropdownGroup = ({
           "dark:from-green-900/30 dark:to-transparent",
           "hover:from-gray-200 dark:hover:from-green-900/50",
           "transition-all duration-200",
+          dropdownGroupSlot,
           className
         ),
         children: [
@@ -32943,12 +33016,20 @@ var TNDropdownGroup = ({
     ),
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 border-l border-gray-200 dark:border-gray-700 pl-1", children: items.map((item, i) => {
       if (item.type === "title") {
-        return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownTitle, { ...item }, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(Title, { ...item }, i);
       }
       if (item.type === "group") {
-        return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownGroup, { ...item, navigate }, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Group,
+          {
+            ...item,
+            navigate,
+            components
+          },
+          i
+        );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownItem, { ...item, navigate }, i);
+      return /* @__PURE__ */ jsxRuntime.jsx(Item, { ...item, navigate }, i);
     }) })
   ] });
 };
@@ -32960,6 +33041,7 @@ var TNDropdown = ({
   const Item = components?.dropdownItem || TNDropdownItem;
   const Group = components?.dropdownGroup || TNDropdownGroup;
   const Title = components?.dropdownTitle || TNDropdownTitle;
+  const dropdownSlot = useTNSlot("dropdown");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -32971,7 +33053,8 @@ var TNDropdown = ({
         "min-w-[260px]",
         "w-max",
         "max-w-[90vw]",
-        "overflow-auto"
+        "overflow-auto",
+        dropdownSlot
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-0", children: items.map((item, i) => {
         if (item.type === "title") return /* @__PURE__ */ jsxRuntime.jsx(Title, { ...item }, i);
@@ -32997,10 +33080,12 @@ var TNGroup = ({
   navigate,
   columns,
   components,
-  selected
+  selected,
+  className
 }) => {
   const [open, setOpen] = React26.useState(false);
   const timeoutRef = React26.useRef(null);
+  const groupSlot = useTNSlot("group");
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -33010,15 +33095,16 @@ var TNGroup = ({
       setOpen(false);
     }, 150);
   };
+  const Trigger = components?.item || TNItem;
   const Dropdown = components?.dropdown || TNDropdown;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "relative flex items-center",
+      className: cn("relative flex items-center", groupSlot, className),
       onMouseEnter: handleEnter,
       onMouseLeave: handleLeave,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TNItem, { icon, name: name2, selected: selected || open }),
+        /* @__PURE__ */ jsxRuntime.jsx(Trigger, { icon, name: name2, selected: selected || open }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 -mt-[1px]", children: open && /* @__PURE__ */ jsxRuntime.jsx(
           Dropdown,
           {
@@ -33045,7 +33131,9 @@ var TopNav = ({
   items = [],
   currentPath,
   navigate,
-  components
+  components,
+  classNames: classNames73,
+  className
 }) => {
   const pathname = currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "");
   const resolved = {
@@ -33065,7 +33153,9 @@ var TopNav = ({
         {
           icon: node2.icon,
           name: node2.name,
+          badge: node2.badge,
           selected,
+          className: node2.className,
           onClick: () => handleNavigate(node2.to)
         },
         node2.key || index3
@@ -33083,6 +33173,7 @@ var TopNav = ({
           navigate,
           columns: node2.columns,
           components,
+          className: node2.className,
           selected
         },
         node2.key || index3
@@ -33090,7 +33181,13 @@ var TopNav = ({
     }
     return null;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: items.map(renderNode) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TNThemeProvider,
+    {
+      value: { components: components || {}, classNames: classNames73 || {} },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", classNames73?.root, className), children: items.map(renderNode) })
+    }
+  );
 };
 function ReviewForm({
   initialValues,
@@ -59338,10 +59435,13 @@ exports.StarRatingInput = StarRatingInput_default;
 exports.StatPlot = StatPlot;
 exports.StaticChartDataSource = StaticChartDataSource;
 exports.Switch = Switch_default;
+exports.TNContext = TNContext;
 exports.TNDropdown = TNDropdown;
+exports.TNDropdownGroup = TNDropdownGroup;
 exports.TNDropdownItem = TNDropdownItem;
 exports.TNDropdownTitle = TNDropdownTitle;
 exports.TNGroup = TNGroup;
+exports.TNItem = TNItem;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
@@ -59409,6 +59509,7 @@ exports.ensureAnonymousIdStorage = ensureAnonymousIdStorage;
 exports.enumValues = enumValues;
 exports.euiToast = euiToast;
 exports.extractHeadings = extractHeadings;
+exports.extractTextColorClasses = extractTextColorClasses;
 exports.findReview = findReview;
 exports.formatChartLabel = formatChartLabel;
 exports.formatChartValue = formatChartValue;
@@ -59501,6 +59602,8 @@ exports.usePageTracking = usePageTracking;
 exports.useResolvedChartState = useResolvedChartState;
 exports.useReviewThreadState = useReviewThreadState;
 exports.useSessionTracking = useSessionTracking;
+exports.useTNSlot = useTNSlot;
+exports.useTNTheme = useTNTheme;
 exports.useTheme = useTheme_default;
 exports.writeAnalyticsQueueStorage = writeAnalyticsQueueStorage;
 exports.writeConsentStorage = writeConsentStorage;