@woobee/ui 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React16 = require('react');
+var React18 = require('react');
 var reactDom = require('react-dom');
 var reactTransitionGroup = require('react-transition-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React16__default = /*#__PURE__*/_interopDefault(React16);
+var React18__default = /*#__PURE__*/_interopDefault(React18);
 
 // src/utils/classNames.ts
 function classNames(classNameHash) {
@@ -182,11 +182,11 @@ function Tabs({
     }
   );
 }
-var Toggle = React16.forwardRef(
+var Toggle = React18.forwardRef(
   ({ listening, size, name, value, onChange, className }, ref) => {
-    const internalRef = React16.useRef(null);
+    const internalRef = React18.useRef(null);
     const spanRef = ref || internalRef;
-    React16.useEffect(() => {
+    React18.useEffect(() => {
       if (listening && spanRef && "current" in spanRef && spanRef.current && value !== null) {
         spanRef.current.value = value;
       }
@@ -271,7 +271,7 @@ function CheckboxList({
   loading = false,
   placeholder = "No items found."
 }) {
-  const hasLoadedRef = React16.useRef(false);
+  const hasLoadedRef = React18.useRef(false);
   if (!loading) {
     hasLoadedRef.current = true;
   }
@@ -329,7 +329,7 @@ function CheckboxList({
     );
   }) : renderPlaceholder() }) }) });
 }
-var ModalContext = React16.createContext({
+var ModalContext = React18.createContext({
   modalShowing: false,
   drawerShowing: false,
   setModalShowing: () => {
@@ -338,10 +338,10 @@ var ModalContext = React16.createContext({
   }
 });
 function useModalContext() {
-  return React16.useContext(ModalContext);
+  return React18.useContext(ModalContext);
 }
 function ModalProvider({ children }) {
-  const [currentState, setCurrentState] = React16.useState(0);
+  const [currentState, setCurrentState] = React18.useState(0);
   function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("modalShowing" in action) {
@@ -355,12 +355,12 @@ function ModalProvider({ children }) {
     }
     return updatedValues;
   }
-  const [values, dispatch] = React16.useReducer(reducer2, {
+  const [values, dispatch] = React18.useReducer(reducer2, {
     modalShowing: false,
     drawerShowing: false
   });
   const { modalShowing, drawerShowing } = values;
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (typeof document === "undefined") return;
     const bodyEl = document.getElementsByTagName("BODY")[0];
     if (!bodyEl) return;
@@ -383,12 +383,12 @@ function ModalProvider({ children }) {
     }
   );
 }
-var TransitionContext = React16.createContext({
+var TransitionContext = React18.createContext({
   parent: {}
 });
 function useIsInitialRender() {
-  const isInitialRender = React16.useRef(true);
-  React16.useEffect(() => {
+  const isInitialRender = React18.useRef(true);
+  React18.useEffect(() => {
     isInitialRender.current = false;
   }, []);
   return isInitialRender.current;
@@ -422,7 +422,7 @@ function CSSTransitionComponent({
   const leaveClasses = leave.split(" ").filter((s) => s.length);
   const leaveFromClasses = leaveFrom.split(" ").filter((s) => s.length);
   const leaveToClasses = leaveTo.split(" ").filter((s) => s.length);
-  const nodeRef = React16.useRef(null);
+  const nodeRef = React18.useRef(null);
   function addClasses(node, classes) {
     classes.length && node.classList.add(...classes);
   }
@@ -472,7 +472,7 @@ function CSSTransitionComponent({
         removeClasses(nodeRef.current, [...leaveToClasses, ...leaveClasses]);
         onExited(nodeRef.current);
       },
-      children: React16__default.default.cloneElement(children, {
+      children: React18__default.default.cloneElement(children, {
         ref: (node) => {
           nodeRef.current = node;
           const childRef = children.ref;
@@ -487,7 +487,7 @@ function CSSTransitionComponent({
   );
 }
 function Transition({ show, appear, ...rest }) {
-  const { parent } = React16.useContext(TransitionContext);
+  const { parent } = React18.useContext(TransitionContext);
   const isInitialRender = useIsInitialRender();
   const isChild = show === void 0;
   if (isChild) {
@@ -602,15 +602,15 @@ function Modal({
   fullscreen,
   opts
 }) {
-  const { setModalShowing } = React16.useContext(ModalContext);
+  const { setModalShowing } = React18.useContext(ModalContext);
   const { darkMode, sidebarPosition = "right", mobileSidebarPosition = "bottom" } = opts || {};
   const isMobileSidebarTop = mobileSidebarPosition === "top" || mobileSidebarPosition === "above";
-  const [mounted, setMounted] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mounted, setMounted] = React18.useState(false);
+  React18.useEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (typeof document === "undefined") return;
     const bodyEl = document.getElementsByTagName("BODY")[0];
     if (open) {
@@ -639,16 +639,15 @@ function Modal({
   }
   if (!mounted) return null;
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 lg:px-6 lg:inset-0 lg:flex lg:items-center lg:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 md:px-6 md:inset-0 md:flex md:items-center md:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: classNames({
           "max-h-[100dvh] overflow-y-auto sm:w-full": true,
-          "lg:max-w-2xl": !size,
-          "lg:max-w-md": size === "small",
-          "lg:max-w-3xl": size === "medium",
-          "lg:max-w-6xl": size === "large",
-          "h-[100dvh] lg:h-auto lg:max-w-3xl": size === "full"
+          "md:max-w-2xl": !size || size === "medium",
+          "md:max-w-md": size === "small",
+          "md:max-w-4xl": size === "large",
+          "h-[100dvh] md:h-auto md:max-w-3xl": size === "full"
         }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -835,8 +834,8 @@ function Drawer({
   wrapperClassName,
   sectionClassName = ""
 }) {
-  const { setDrawerShowing } = React16.useContext(ModalContext);
-  React16.useEffect(() => {
+  const { setDrawerShowing } = React18.useContext(ModalContext);
+  React18.useEffect(() => {
     setDrawerShowing(open);
   }, [open]);
   function handleClose() {
@@ -957,9 +956,9 @@ function InlinePrompt({
   cancelText,
   opts
 }) {
-  const [isOpen, setIsOpen] = React16.useState(false);
-  const nodeTarget = React16.useRef(null);
-  const nodeWindow = React16.useRef(null);
+  const [isOpen, setIsOpen] = React18.useState(false);
+  const nodeTarget = React18.useRef(null);
+  const nodeWindow = React18.useRef(null);
   const { condensed, blocked } = opts || {};
   function handleClickOutside(e) {
     if (nodeTarget.current?.contains(e.target) || nodeWindow.current?.contains(e.target)) {
@@ -979,7 +978,7 @@ function InlinePrompt({
     onConfirm();
     setIsOpen(false);
   }
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     } else {
@@ -1058,6 +1057,268 @@ function InlinePrompt({
     )
   ] }) });
 }
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, children });
+}
+function Breadcrumb({
+  links,
+  onBack,
+  linkComponent: LinkComponent = DefaultLink
+}) {
+  function clickBack(e) {
+    e.preventDefault();
+    if (onBack) {
+      onBack();
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-5 px-4 sm:px-6 lg:px-8", children: [
+    onBack && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        onClick: clickBack,
+        className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
+              clipRule: "evenodd"
+            }
+          ) }),
+          "Back"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
+      index !== links.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+          clipRule: "evenodd"
+        }
+      ) })
+    ] }, `breadcrumb-link-${index}-${link.name}`)) })
+  ] }) });
+}
+function DefaultLink2({ href, className, children, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, onClick, children });
+}
+function TabItemComponent({
+  allowRedirect,
+  item,
+  label,
+  isActive,
+  onSelect,
+  linkComponent: LinkComponent = DefaultLink2
+}) {
+  function handleTabSelect() {
+    onSelect(item);
+  }
+  if (!!allowRedirect && !!item.link) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LinkComponent,
+      {
+        href: item.link,
+        className: classNames({
+          "whitespace-no-wrap -mb-px cursor-pointer border-b-2 py-2 px-3 text-center text-sm font-medium leading-5 tracking-tight focus:outline-none sm:px-5 sm:text-base sm:tracking-normal": true,
+          "border-primary-500 text-primary-500 focus:border-primary-500 focus:text-primary-500": isActive,
+          "text-cool-gray-500 hover:text-cool-gray-700 focus:text-cool-gray-700 border-transparent hover:border-transparent focus:border-transparent": !isActive
+        }),
+        onClick: handleTabSelect,
+        children: item[label]
+      }
+    );
+  }
+  return null;
+}
+function Tab({
+  items,
+  label,
+  value,
+  defaultValue,
+  allowRedirect,
+  onChange,
+  rightContent,
+  linkComponent
+}) {
+  const [selected, setSelected] = React18.useState(defaultValue);
+  React18.useEffect(() => {
+    setSelected(value);
+  }, [value]);
+  function handleSelect(item) {
+    if (typeof onChange === "function") {
+      onChange(item);
+    }
+    setSelected(item && item.id || null);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "no-scrollbar flex w-full  items-stretch pb-1 sm:pb-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-cool-gray-200 -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      TabItemComponent,
+      {
+        item,
+        label,
+        isActive: selected === item.id,
+        allowRedirect,
+        onSelect: handleSelect,
+        linkComponent
+      },
+      item.id
+    )) }),
+    rightContent && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-cool-gray-200 -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
+  ] });
+}
+function DefaultLink3({ href, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, children });
+}
+function ButtonItem({
+  className,
+  active,
+  direction,
+  iconPosition,
+  button,
+  onChange,
+  onChangeGroup,
+  currentPath,
+  navLinks,
+  linkComponent: LinkComponent = DefaultLink3
+}) {
+  let currentButton = { ...button };
+  if (active && navLinks && currentPath) {
+    const navItem = navLinks.find((navLink) => navLink.url === currentPath);
+    if (navItem) {
+      currentButton.label = navItem.label;
+      currentButton.image = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5", children: navItem.icon });
+      currentButton.icon = void 0;
+    }
+  }
+  const buttonContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames({
+        "p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
+        "w-full": direction === "vertical",
+        "w-full overflow-hidden": direction === "horizontal",
+        "!text-charcoal-700 dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
+        ...classNameObject(className)
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: classNames({
+            "flex items-center justify-center": true,
+            "flex-col md:flex-row md:space-x-1.5": !!currentButton.image,
+            "gap-2": !currentButton.image && !!currentButton.icon,
+            "flex-row-reverse": !currentButton.image && iconPosition === "back",
+            "flex-row": !currentButton.image && iconPosition !== "back"
+          }),
+          children: [
+            currentButton.image && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-0.5 md:mb-0", children: [
+              typeof currentButton.image === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: currentButton.image,
+                  alt: currentButton.label,
+                  className: "w-6 h-6 object-cover rounded-full pointer-events-none"
+                }
+              ),
+              typeof currentButton.image === "object" && currentButton.image
+            ] }),
+            !currentButton.image && currentButton.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: currentButton.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: classNames({
+                  "text-xs font-thin tracking-tight": true,
+                  "!font-normal": active
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "line-clamp-1", children: currentButton.label })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  if (currentButton.subgroups) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onClick: () => onChangeGroup(button),
+        children: buttonContent
+      }
+    );
+  }
+  if (currentButton.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: currentButton.url, children: buttonContent });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: () => onChange && onChange(button.id),
+      children: buttonContent
+    }
+  );
+}
+function ButtonGroup({
+  buttons = [],
+  direction = "horizontal",
+  iconPosition = "front",
+  activeId,
+  onChange,
+  className,
+  itemClassName,
+  currentPath,
+  navLinks,
+  linkComponent,
+  subgroupModal
+}) {
+  const [selectedGroup, setSelectedGroup] = React18.useState(null);
+  function handleCloseModal() {
+    setSelectedGroup(null);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames({
+        "gap-2 scrollbar-hide": true,
+        "w-full": direction === "vertical",
+        "grid grid-cols-5 w-full items-center": direction === "horizontal",
+        ...classNameObject(className)
+      }),
+      children: [
+        buttons.map((button) => {
+          const isActive = activeId === button.id;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonItem,
+            {
+              className: itemClassName,
+              button,
+              direction,
+              iconPosition,
+              onChange,
+              onChangeGroup: (group) => setSelectedGroup(group),
+              active: isActive,
+              currentPath,
+              navLinks,
+              linkComponent
+            },
+            button.id
+          );
+        }),
+        subgroupModal && subgroupModal({
+          open: !!selectedGroup,
+          label: selectedGroup?.label,
+          items: selectedGroup?.subgroups,
+          onClose: handleCloseModal,
+          onChange
+        })
+      ]
+    }
+  );
+}
 function H1({ className, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "h1",
@@ -1199,7 +1460,7 @@ function Td({ className, align, colSpan, condensed, narrow, children }) {
     }
   );
 }
-var Input = React16.forwardRef((props, ref) => {
+var Input = React18.forwardRef((props, ref) => {
   const {
     id,
     theme,
@@ -1235,11 +1496,11 @@ var Input = React16.forwardRef((props, ref) => {
     hideIndicator,
     darkMode
   } = props;
-  const [focused, setFocused] = React16.useState(false);
-  const inputRef = React16.useRef(null);
+  const [focused, setFocused] = React18.useState(false);
+  const inputRef = React18.useRef(null);
   const hasPrefix = !!prefix && prefix.length > 0;
-  React16.useImperativeHandle(ref, () => inputRef.current);
-  React16.useEffect(() => {
+  React18.useImperativeHandle(ref, () => inputRef.current);
+  React18.useEffect(() => {
     if (listening && inputRef.current && defaultValue !== null && defaultValue !== void 0) {
       if (hasPrefix) {
         inputRef.current.value = prefix + String(defaultValue);
@@ -1417,7 +1678,7 @@ function Label({
     )
   ] });
 }
-var Select = React16.forwardRef((props, ref) => {
+var Select = React18.forwardRef((props, ref) => {
   const {
     id,
     loading = false,
@@ -1457,7 +1718,7 @@ var Select = React16.forwardRef((props, ref) => {
 });
 Select.displayName = "Select";
 var Select_default = Select;
-var SelectInput = React16.forwardRef((props, ref) => {
+var SelectInput = React18.forwardRef((props, ref) => {
   const {
     className,
     placeholder = "Select an option",
@@ -1494,7 +1755,7 @@ var SelectInput = React16.forwardRef((props, ref) => {
 });
 SelectInput.displayName = "SelectInput";
 var SelectInput_default = SelectInput;
-var Textarea = React16.forwardRef((props, ref) => {
+var Textarea = React18.forwardRef((props, ref) => {
   const {
     id,
     className,
@@ -1559,8 +1820,8 @@ function TagInput({
   onChange,
   placeholder
 }) {
-  const [currentState, setCurrentState] = React16.useState(0);
-  const tagInputRef = React16.useRef(null);
+  const [currentState, setCurrentState] = React18.useState(0);
+  const tagInputRef = React18.useRef(null);
   function reducer2(state, action) {
     const updatedValues = { ...state };
     if ("tags" in action) {
@@ -1574,11 +1835,11 @@ function TagInput({
     }
     return updatedValues;
   }
-  const [values, dispatch] = React16.useReducer(reducer2, {
+  const [values, dispatch] = React18.useReducer(reducer2, {
     tags: []
   });
   const { tags } = values;
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (defaultValue) {
       dispatch({ tags: defaultValue, render: true });
     } else {
@@ -1665,7 +1926,7 @@ function NoData({ className }) {
     ] })
   ] });
 }
-var ThemeContext = React16.createContext(void 0);
+var ThemeContext = React18.createContext(void 0);
 var currentIsDark = false;
 var matchMediaListeners = /* @__PURE__ */ new Set();
 var originalMatchMedia = null;
@@ -1721,15 +1982,15 @@ if (typeof window !== "undefined") {
   };
 }
 function ThemeProvider({ children, defaultTheme = "system" }) {
-  const [mode, setMode] = React16.useState(defaultTheme);
-  const [isDark, setIsDark] = React16.useState(false);
-  const [mounted, setMounted] = React16.useState(false);
-  React16.useEffect(() => {
+  const [mode, setMode] = React18.useState(defaultTheme);
+  const [isDark, setIsDark] = React18.useState(false);
+  const [mounted, setMounted] = React18.useState(false);
+  React18.useEffect(() => {
     const saved = localStorage.getItem("theme") || defaultTheme;
     setMode(saved);
     setMounted(true);
   }, [defaultTheme]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (!mounted) return;
     const media = originalMatchMedia ? originalMatchMedia.call(window, "(prefers-color-scheme: dark)") : null;
     const updateTheme = () => {
@@ -1796,7 +2057,7 @@ function ThemeProvider({ children, defaultTheme = "system" }) {
   );
 }
 function useThemeContext() {
-  const context = React16.useContext(ThemeContext);
+  const context = React18.useContext(ThemeContext);
   if (!context) {
     throw new Error("useThemeContext must be used within a ThemeProvider");
   }
@@ -1843,13 +2104,13 @@ function debounce(fn, delay) {
 
 // src/hooks/useDebounce.ts
 function useDebounce(callback, delay, deps = []) {
-  const callbackFn = React16.useCallback(debounce(callback, delay), deps);
+  const callbackFn = React18.useCallback(debounce(callback, delay), deps);
   return [callbackFn];
 }
 
 // src/hooks/useResizeListener.ts
 function useResizeListener(props = {}) {
-  const [values, setValues] = React16.useState(
+  const [values, setValues] = React18.useState(
     [
       typeof window === "undefined" ? props.mobileAgent ? 375 : 1080 : window.innerWidth,
       typeof window === "undefined" ? props.mobileAgent ? 812 : 750 : window.innerHeight,
@@ -1871,7 +2132,7 @@ function useResizeListener(props = {}) {
     ]);
   }
   const [debouncedSetValue] = useDebounce(handleChangeViewport, 300);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     window.addEventListener("resize", debouncedSetValue);
     return () => {
       window.removeEventListener("resize", debouncedSetValue);
@@ -1879,7 +2140,7 @@ function useResizeListener(props = {}) {
   }, [debouncedSetValue]);
   return { screenWidth, screenHeight, viewport, viewMode, mobileView, tabletView };
 }
-var PopoverContext = React16.createContext(void 0);
+var PopoverContext = React18.createContext(void 0);
 function PopoverCard({
   show,
   style,
@@ -2059,15 +2320,15 @@ function reducer(state, action) {
   return updatedValues;
 }
 function PopoverProvider({ children }) {
-  const [values, dispatch] = React16.useReducer(reducer, resetValues);
+  const [values, dispatch] = React18.useReducer(reducer, resetValues);
   const { show, style, tooltipStyle, position, description, actions } = values;
-  const handleShowPopover = React16.useCallback((params) => {
+  const handleShowPopover = React18.useCallback((params) => {
     dispatch(params);
   }, []);
-  const handleClosePopover = React16.useCallback(() => {
+  const handleClosePopover = React18.useCallback(() => {
     dispatch(resetValues);
   }, []);
-  const contextValue = React16.useMemo(() => ({
+  const contextValue = React18.useMemo(() => ({
     showPopover: show,
     setPopover: handleShowPopover
   }), [show, handleShowPopover]);
@@ -2088,7 +2349,7 @@ function PopoverProvider({ children }) {
   ] });
 }
 function usePopoverContext() {
-  const context = React16.useContext(PopoverContext);
+  const context = React18.useContext(PopoverContext);
   if (!context) {
     throw new Error("usePopoverContext must be used within a PopoverProvider");
   }
@@ -2098,12 +2359,12 @@ function Popover({ className, description, actions, children, opts }) {
   const { activated } = opts || {};
   const { showPopover, setPopover } = usePopoverContext();
   const { screenWidth, screenHeight } = useResizeListener();
-  const [menuData, setMenuData] = React16.useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
-  const parentRef = React16.useRef(null);
-  const prevShowMenuRef = React16.useRef(false);
-  const prevShowPopoverRef = React16.useRef(false);
+  const [menuData, setMenuData] = React18.useState({ showMenu: false, x: 0, y: 0, left: 0, right: 0, top: 0, bottom: 0 });
+  const parentRef = React18.useRef(null);
+  const prevShowMenuRef = React18.useRef(false);
+  const prevShowPopoverRef = React18.useRef(false);
   (actions || []).some((action) => (action.items || []).length > 0);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     const wasOpen = prevShowMenuRef.current;
     prevShowMenuRef.current = menuData.showMenu;
     if (!menuData.showMenu && !wasOpen) {
@@ -2131,7 +2392,7 @@ function Popover({ className, description, actions, children, opts }) {
       actions
     });
   }, [menuData, screenWidth, screenHeight, description, actions, setPopover]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (prevShowPopoverRef.current && !showPopover) {
       setMenuData((prev) => ({
         ...prev,
@@ -2261,8 +2522,8 @@ function Dragger({
   children,
   onChange
 }) {
-  const [, setCurrentState] = React16.useState(0);
-  const [values, dispatch] = React16.useReducer(reducer2, {
+  const [, setCurrentState] = React18.useState(0);
+  const [values, dispatch] = React18.useReducer(reducer2, {
     items: null,
     displayItems: null,
     dragging: false,
@@ -2275,14 +2536,14 @@ function Dragger({
   const { items, displayItems, dragging, dragItem, dragFrom, dragTo, updated } = values || {};
   const grandChildren = children && children.props.children;
   const isValid = !disabled && !!records && !!children && !!grandChildren && grandChildren.length > 0;
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     dispatch({
       items: grandChildren,
       updated: false,
       render: true
     });
   }, [timestamp, grandChildren]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (!updated) {
       if (grandChildren && grandChildren.length > 0) {
         dispatch({
@@ -2522,9 +2783,9 @@ function Dragger({
     }
     dispatch({ dragging: false });
   }
-  const derivedItems = !!items && React16__default.default.cloneElement(children, {
+  const derivedItems = !!items && React18__default.default.cloneElement(children, {
     children: items.map((grandChild, index) => {
-      return React16__default.default.cloneElement(grandChild, {
+      return React18__default.default.cloneElement(grandChild, {
         id: (records[index] || {}).id,
         draggable: true,
         className: classNames({
@@ -2541,9 +2802,9 @@ function Dragger({
       });
     })
   });
-  const derivedDisplayItems = !!displayItems && React16__default.default.cloneElement(children, {
+  const derivedDisplayItems = !!displayItems && React18__default.default.cloneElement(children, {
     children: displayItems.map((grandChild, index) => {
-      return React16__default.default.cloneElement(grandChild, {
+      return React18__default.default.cloneElement(grandChild, {
         draggable: true,
         className: classNames({
           ...classNameObject(grandChild.props.className),
@@ -2601,8 +2862,8 @@ function ExcelTable({
   isAddRowVisible = true,
   addRowLabel = "+ Add Option"
 }) {
-  const [editingCell, setEditingCell] = React16.useState(null);
-  React16.useEffect(() => {
+  const [editingCell, setEditingCell] = React18.useState(null);
+  React18.useEffect(() => {
     setTimeout(() => {
       const textareas = document.querySelectorAll(".excel-table-textarea");
       textareas.forEach((ta) => {
@@ -2826,21 +3087,21 @@ function ExcelTable({
   ] }) });
 }
 function Coverflow({ images = [], onClose }) {
-  const scrollContainerRef = React16.useRef(null);
-  const thumbnailContainerRef = React16.useRef(null);
-  const [visualIndex, setVisualIndex] = React16.useState(0);
-  const isJumpingRef = React16.useRef(false);
-  const wheelLockRef = React16.useRef(false);
-  const wheelTimeoutRef = React16.useRef(null);
-  const [isReady, setIsReady] = React16.useState(false);
-  const [isMounted, setIsMounted] = React16.useState(false);
-  React16.useEffect(() => {
+  const scrollContainerRef = React18.useRef(null);
+  const thumbnailContainerRef = React18.useRef(null);
+  const [visualIndex, setVisualIndex] = React18.useState(0);
+  const isJumpingRef = React18.useRef(false);
+  const wheelLockRef = React18.useRef(false);
+  const wheelTimeoutRef = React18.useRef(null);
+  const [isReady, setIsReady] = React18.useState(false);
+  const [isMounted, setIsMounted] = React18.useState(false);
+  React18.useEffect(() => {
     setIsMounted(true);
   }, []);
   const count = images.length;
   const hasMultiple = count > 1;
   const extendedImages = hasMultiple ? [images[count - 1], ...images, images[0]] : images;
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (hasMultiple && scrollContainerRef.current) {
       const container = scrollContainerRef.current;
       const width = container.offsetWidth;
@@ -2851,7 +3112,7 @@ function Coverflow({ images = [], onClose }) {
       setIsReady(true);
     }
   }, [hasMultiple]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (hasMultiple && thumbnailContainerRef.current) {
       const thumbContainer = thumbnailContainerRef.current;
       const thumbNode = thumbContainer.children[visualIndex];
@@ -2864,7 +3125,7 @@ function Coverflow({ images = [], onClose }) {
       }
     }
   }, [visualIndex, hasMultiple]);
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     const container = scrollContainerRef.current;
     if (!container || !hasMultiple) return;
     const handleWheel = (e) => {
@@ -2968,7 +3229,7 @@ function Coverflow({ images = [], onClose }) {
       behavior: "smooth"
     });
   };
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose && onClose();
       if (e.key === "ArrowLeft") prevSlide();
@@ -3142,7 +3403,7 @@ function DataTableRow({ index, selected, label, description, additionalDescripti
               "!text-left": dataItem.align === "left",
               "align-middle": vertical === "middle"
             }),
-            children: typeof dataItem.data[index] === "string" || React16__default.default.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
+            children: typeof dataItem.data[index] === "string" || React18__default.default.isValidElement(dataItem.data[index]) ? dataItem.data[index] : numberFormatter(dataItem.data[index], dataItem.decimal != null ? dataItem.decimal : 1)
           },
           `${dataIndex}-${index}`
         ))
@@ -3163,8 +3424,8 @@ function DataTable({
 }) {
   const { mobileView } = useResizeListener();
   const { ignoreTotal, showCurrency, labelTitle, labelCentered, vertical, darkMode } = opts || {};
-  const [displayHeaders, setDisplayHeaders] = React16.useState([]);
-  React16.useEffect(() => {
+  const [displayHeaders, setDisplayHeaders] = React18.useState([]);
+  React18.useEffect(() => {
     setDisplayHeaders(headers);
   }, [headers]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3279,7 +3540,7 @@ function DataTable({
                 backgroundColor: `${colors[dataIndex]}`,
                 color: bestTextColorForBg(colors[dataIndex])
               } : void 0,
-              children: typeof total[dataIndex] === "string" || React16__default.default.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsxRuntime.jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
+              children: typeof total[dataIndex] === "string" || React18__default.default.isValidElement(total[dataIndex]) ? total[dataIndex] : showCurrency ? /* @__PURE__ */ jsxRuntime.jsx(CurrencyDisplay, { amount: total[dataIndex] }) : numberFormatter(total[dataIndex], 1)
             },
             `${dataIndex}-total`
           ))
@@ -3461,8 +3722,8 @@ function DataGridHeader({ sort, onClick, opts, children }) {
   );
 }
 function DataGridElement({ processing: defaultProcessing, type, value, error, menu, params, opts, onSelect }) {
-  const [processing, setProcessing] = React16.useState(defaultProcessing);
-  React16.useEffect(() => {
+  const [processing, setProcessing] = React18.useState(defaultProcessing);
+  React18.useEffect(() => {
     setProcessing(defaultProcessing);
   }, [defaultProcessing]);
   const { align } = opts || {};
@@ -3554,8 +3815,8 @@ function DataGridContent({ loading, error, type, value, opts, onClick }) {
   );
 }
 function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
-  const [displayedData, setDisplayedData] = React16.useState([]);
-  const [orderByState, setOrderByState] = React16.useState({
+  const [displayedData, setDisplayedData] = React18.useState([]);
+  const [orderByState, setOrderByState] = React18.useState({
     category: headers[0]?.id || "",
     direction: "asc"
   });
@@ -3567,7 +3828,7 @@ function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
       setOrderByState({ category, direction: orderByState.direction === "asc" ? "desc" : "asc" });
     }
   }
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if ((data || []).length > 0) {
       const availableKeys = (headers || []).map((header) => header.id);
       const { category, direction } = orderByState;
@@ -3692,7 +3953,9 @@ function DataGrid({ headers, data, selectedId, footers, opts, onSelect }) {
 }
 
 exports.B = B;
+exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.CheckboxList = CheckboxList;
 exports.ConfirmationBox = ConfirmationBox;
 exports.Coverflow = Coverflow;
@@ -3718,6 +3981,7 @@ exports.PopoverProvider = PopoverProvider;
 exports.Select = Select_default;
 exports.SelectInput = SelectInput_default;
 exports.SortIcon = SortIcon;
+exports.Tab = Tab;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag;