react-better-html 1.1.78 → 1.1.80

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   Div: () => Div_default,
   Divider: () => Divider_default,
   Dropdown: () => Dropdown_default,
+  Foldable: () => Foldable_default,
   Form: () => Form_default,
   FormRow: () => FormRow_default,
   Icon: () => Icon_default,
@@ -48,6 +49,7 @@ __export(index_exports, {
   PageHeader: () => PageHeader_default,
   PageHolder: () => PageHolder_default,
   Table: () => Table_default,
+  Tabs: () => Tabs_default,
   Text: () => Text_default,
   ToggleInput: () => ToggleInput_default,
   formatPhoneNumber: () => formatPhoneNumber,
@@ -1574,9 +1576,17 @@ var useBetterHtmlContext = () => {
     throw new Error(
       "`useBetterHtmlContext()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
     );
-  const { setLoaders, plugins, ...rest } = context;
+  const { setLoaders, plugins, tabsComponentState, ...rest } = context;
   return rest;
 };
+var useBetterHtmlContextInternal = () => {
+  const context = (0, import_react.useContext)(betterHtmlContext);
+  if (context === void 0)
+    throw new Error(
+      "`useBetterHtmlContextInternal()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree."
+    );
+  return context;
+};
 var useTheme = () => {
   const context = (0, import_react.useContext)(betterHtmlContext);
   if (context === void 0)
@@ -1643,11 +1653,13 @@ function BetterHtmlProviderContent({ children }) {
   ] });
 }
 function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
-  const [loaders, setLoaders] = (0, import_react.useState)(value?.loaders ?? {});
-  const [plugins] = (0, import_react.useState)(pluginsToUse ?? []);
   const [colorTheme, setColorTheme] = (0, import_react.useState)(
     localStorage.getItem("theme") === "dark" ? "dark" : value?.colorTheme ?? "light"
   );
+  const [loaders, setLoaders] = (0, import_react.useState)(value?.loaders ?? {});
+  const [plugins] = (0, import_react.useState)(pluginsToUse ?? []);
+  const [tabGroups, setTabGroups] = (0, import_react.useState)([]);
+  const [tabsWithDots, setTabsWithDots] = (0, import_react.useState)([]);
   const readyValue = (0, import_react.useMemo)(
     () => ({
       app: {
@@ -1684,9 +1696,15 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
       components: {
         ...value?.components
       },
-      plugins
+      plugins,
+      tabsComponentState: {
+        tabGroups,
+        setTabGroups,
+        tabsWithDots,
+        setTabsWithDots
+      }
     }),
-    [value, colorTheme, loaders, plugins]
+    [value, colorTheme, loaders, plugins, tabGroups, tabsWithDots]
   );
   (0, import_react.useEffect)(() => {
     plugins.forEach((plugin) => {
@@ -2387,7 +2405,7 @@ var IconElement = import_styled_components5.default.svg.withConfig({
 `;
 var Icon = (0, import_react6.forwardRef)(function Icon2({ name, size = 16, ...props }, ref) {
   const theme2 = useTheme();
-  const { icons: icons2 } = useBetterHtmlContext();
+  const { icons: icons2 } = useBetterHtmlContextInternal();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -2446,7 +2464,7 @@ var ImageElement = import_styled_components6.default.img.withConfig({
 `;
 var Image = (0, import_react8.forwardRef)(function Image2({ name, src, ...props }, ref) {
   const theme2 = useTheme();
-  const { assets: assets2 } = useBetterHtmlContext();
+  const { assets: assets2 } = useBetterHtmlContextInternal();
   const styledComponentStyles = useStyledComponentStyles(props, theme2);
   const dataProps = useComponentPropsWithPrefix(props, "data");
   const ariaProps = useComponentPropsWithPrefix(props, "aria");
@@ -2483,7 +2501,7 @@ var import_react9 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ButtonElement = import_styled_components7.default.button.withConfig({
-  shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "normalStyle", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
 })`
    display: block;
    position: relative;
@@ -2505,15 +2523,11 @@ var ButtonElement = import_styled_components7.default.button.withConfig({
    ${(props) => props.disabled ? import_styled_components7.css`
               opacity: 0.6;
               cursor: not-allowed;
-
-              &.secondary:disabled {
-                 filter: brightness(0.9);
-              }
            ` : !props.isLoading ? import_styled_components7.css`
               cursor: pointer;
 
               &:not(.secondary):hover {
-                 filter: brightness(0.9);
+                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
               }
 
               &.secondary:hover {
@@ -2562,7 +2576,7 @@ var ButtonComponent = function Button({
 }) {
   const theme2 = useTheme();
   const isLoadingHook = useLoader(loaderName);
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const isLoadingElement = isLoading ?? isLoadingHook;
   const styledComponentStyles = useStyledComponentStyles(
     {
@@ -2603,6 +2617,7 @@ var ButtonComponent = function Button({
     {
       as: href ? "a" : "button",
       theme: theme2,
+      colorTheme: betterHtmlContext2.colorTheme,
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
@@ -2664,7 +2679,7 @@ var ButtonComponent = function Button({
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ButtonComponent,
     {
@@ -2677,7 +2692,7 @@ ButtonComponent.secondary = function Secondary({ className, ...props }) {
 };
 ButtonComponent.destructive = function Destructive(props) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ButtonComponent,
     {
@@ -2690,7 +2705,7 @@ ButtonComponent.destructive = function Destructive(props) {
 };
 ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...props }) {
   const theme2 = useTheme();
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const buttonSize = size + theme2.styles.space;
   const backgroundButtonColorReady = backgroundButtonColor ?? theme2.colors.textPrimary;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2714,7 +2729,7 @@ ButtonComponent.icon = function Icon3({ size = 16, backgroundButtonColor, ...pro
   );
 };
 ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...props }) {
-  const betterHtmlContext2 = useBetterHtmlContext();
+  const betterHtmlContext2 = useBetterHtmlContextInternal();
   const onClickElement = (0, import_react9.useCallback)(() => {
     const input = document.createElement("input");
     input.setAttribute("type", "file");
@@ -2836,7 +2851,7 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
   const theme2 = useTheme();
-  const { app, colorTheme } = useBetterHtmlContext();
+  const { app, colorTheme } = useBetterHtmlContextInternal();
   const dialogRef = (0, import_react11.useRef)(null);
   const [isOpened, setIsOpened] = (0, import_react11.useState)(false);
   const [isOpenedLate, setIsOpenedLate] = (0, import_react11.useState)(false);
@@ -2844,13 +2859,14 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     dialogRef.current?.showModal();
     setIsOpened(true);
     setIsOpenedLate(true);
-    if (urlQuery && name)
+    if (urlQuery && name) {
       urlQuery.setQuery(
         {
           [`${name}-modal`]: "opened"
         },
         false
       );
+    }
     onOpen?.();
   }, [onOpen, urlQuery, name]);
   const onClickClose = (0, import_react11.useCallback)(() => {
@@ -3046,7 +3062,7 @@ var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function PageHolder({ noMaxContentWidth, children }) {
   const theme2 = useTheme();
-  const { app } = useBetterHtmlContext();
+  const { app } = useBetterHtmlContextInternal();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Div_default,
     {
@@ -3077,7 +3093,7 @@ function PageHeader({
   marginBottom
 }) {
   const theme2 = useTheme();
-  const { app } = useBetterHtmlContext();
+  const { app } = useBetterHtmlContextInternal();
   const mediaQuery = useMediaQuery();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, marginBottom: marginBottom ?? theme2.styles.space * 2, children: [
     imageUrl && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -4750,7 +4766,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   ...props
 }, ref) {
   const theme2 = useTheme();
-  const dropdownHolderRef = (0, import_react16.useRef)(null);
+  const inputFieldHolderRef = (0, import_react16.useRef)(null);
   const inputRef = (0, import_react16.useRef)(null);
   const [isOpen, setIsOpen] = useBooleanState();
   const [isOpenLate, setIsOpenLate] = useBooleanState();
@@ -4861,7 +4877,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   }, [filteredOptions]);
   (0, import_react16.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (dropdownHolderRef.current && !dropdownHolderRef.current.contains(event.target)) {
+      if (inputFieldHolderRef.current && !inputFieldHolderRef.current.contains(event.target)) {
         setIsOpen.setFalse();
         setSearchQuery("");
         setFocusedOptionIndex(void 0);
@@ -4881,7 +4897,7 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
   const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
   const withClearButton = isOpen && selectedOption;
   const readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Div_default.column, { width: "100%", position: "relative", userSelect: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Div_default.row, { position: "relative", width: "100%", ref: inputFieldHolderRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       InputField_default,
       {
@@ -5360,9 +5376,9 @@ var InputFieldComponent = (0, import_react18.forwardRef)(function InputField({
     if (!withDebounce) return;
     onChangeValue?.(debouncedValue);
   }, [withDebounce, onChangeValue, debouncedValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.gap, ...styledComponentStylesWithExcluded, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { text: label, color: labelColor, required, isError: !!errorText }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Div_default, { position: "relative", width: "100%", ref: holderRef, children: [
       leftIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Icon_default,
         {
@@ -5975,6 +5991,8 @@ var InputElement2 = import_styled_components10.default.input.withConfig({
    ${(props) => props.normalStyle}
 
    &:hover {
+      border-color: ${(props) => props.theme.colors.primary};
+
       ${(props) => props.hoverStyle}
    }
 `;
@@ -6460,7 +6478,7 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
   onClickAllCheckboxes,
   ...props
 }, ref) {
-  const { colorTheme } = useBetterHtmlContext();
+  const { colorTheme } = useBetterHtmlContextInternal();
   const theme2 = useTheme();
   const [checkedItems, setCheckedItems] = (0, import_react23.useState)([]);
   const renderCellContent = (0, import_react23.useCallback)(
@@ -6570,6 +6588,301 @@ var TableComponent = (0, import_react23.forwardRef)(function Table({
 var Table2 = (0, import_react23.memo)(TableComponent);
 var Table_default = Table2;
 
+// src/components/Tabs.tsx
+var import_react24 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var tabBottomLineWidth = 2;
+var tabDotSize = 6;
+var defaultTabName = "tab";
+var TabsComponent = function Tabs({
+  tabs,
+  name,
+  accentColor,
+  style = "default",
+  children,
+  ...props
+}) {
+  const reactRouterDomPlugin2 = usePlugin("react-router-dom");
+  const theme2 = useTheme();
+  const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
+  const { colorTheme, tabsComponentState } = useBetterHtmlContextInternal();
+  const tabsRef = (0, import_react24.useRef)({});
+  const [selectedTab, setSelectedTab] = (0, import_react24.useState)(() => {
+    const selectedTabValue = tabs[0] ?? "";
+    if (urlQuery) {
+      const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
+      if (!tabQueryValue) return selectedTabValue;
+      if (tabs.includes(tabQueryValue)) return tabQueryValue;
+    }
+    return selectedTabValue;
+  });
+  const [rerenderState, setRerenderState] = (0, import_react24.useState)(0);
+  const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
+  const onClickTab = (0, import_react24.useCallback)(
+    (tab) => {
+      setSelectedTab(tab);
+      if (urlQuery) {
+        urlQuery.setQuery({
+          [name ?? defaultTabName]: tab
+        });
+      }
+    },
+    [name, urlQuery]
+  );
+  const width = (0, import_react24.useMemo)(
+    () => tabsRef.current[selectedTab]?.getBoundingClientRect().width ?? 0,
+    [rerenderState, selectedTab]
+  );
+  const leftSpacing = (0, import_react24.useMemo)(() => {
+    const selectedTabIndex = tabs.findIndex((tab) => tab === selectedTab);
+    let totalWidth = 0;
+    Object.values(tabsRef.current).forEach((tab, index) => {
+      if (index < selectedTabIndex) totalWidth += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
+    });
+    return totalWidth;
+  }, [selectedTab, tabs, tabsGap]);
+  (0, import_react24.useEffect)(() => {
+    const timeout = setTimeout(() => setRerenderState(Math.random()), 0.01 * 1e3);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  (0, import_react24.useEffect)(() => {
+    tabsComponentState.setTabGroups((oldValue) => {
+      const thisTabGroup = oldValue.find((item) => item.name === (name ?? defaultTabName));
+      if (thisTabGroup) {
+        return oldValue.map(
+          (item) => item.name === (name ?? defaultTabName) ? {
+            ...item,
+            selectedTab
+          } : item
+        );
+      } else {
+        return [
+          ...oldValue,
+          {
+            name: name ?? defaultTabName,
+            selectedTab
+          }
+        ];
+      }
+    });
+  }, [selectedTab, name]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+        const selected = tab === selectedTab;
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          Div_default,
+          {
+            position: "relative",
+            width: "fit-content",
+            backgroundColor: style === "box" ? selected ? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
+            borderTopLeftRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            borderTopRightRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
+            border: style === "box" ? `1px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
+            filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
+            paddingInline: theme2.styles.space,
+            paddingBlock: theme2.styles.gap,
+            value: tab,
+            cursor: "pointer",
+            isTabAccessed: true,
+            onClickWithValue: onClickTab,
+            ref: (ref) => {
+              tabsRef.current[tab] = ref;
+            },
+            children: [
+              tabsComponentState.tabsWithDots.includes(tab) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                Div_default,
+                {
+                  position: "absolute",
+                  top: (theme2.styles.space - tabDotSize) / 2,
+                  right: (theme2.styles.space - tabDotSize) / 2,
+                  width: tabDotSize,
+                  height: tabDotSize,
+                  backgroundColor: style === "box" && selected ? theme2.colors.base : theme2.colors.primary,
+                  borderRadius: 999,
+                  transition: theme2.styles.transition
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                Text_default,
+                {
+                  fontWeight: 700,
+                  color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
+                  transition: theme2.styles.transition,
+                  whiteSpace: "nowrap",
+                  children: tab
+                }
+              )
+            ]
+          },
+          tab
+        );
+      }) }),
+      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        Div_default,
+        {
+          position: "absolute",
+          width,
+          height: tabBottomLineWidth,
+          bottom: 0,
+          left: leftSpacing,
+          backgroundColor: accentColor ?? theme2.colors.primary,
+          transition: theme2.styles.transition
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
+  ] });
+};
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+  const { tabsComponentState } = useBetterHtmlContextInternal();
+  const thisTabGroupData = (0, import_react24.useMemo)(
+    () => tabsComponentState.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [tabsComponentState, tabsGroupName]
+  );
+  (0, import_react24.useEffect)(() => {
+    if (tabWithDot) {
+      tabsComponentState.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+    } else {
+      tabsComponentState.setTabsWithDots?.(
+        (oldValue) => oldValue.includes(tab) ? oldValue.filter((tab2) => tab2 !== tab2) : oldValue
+      );
+    }
+  }, [tabWithDot]);
+  return thisTabGroupData?.selectedTab === tab ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children }) : void 0;
+};
+var Tabs2 = (0, import_react24.memo)(TabsComponent);
+Tabs2.content = TabsComponent.content;
+var Tabs_default = Tabs2;
+
+// src/components/Foldable.tsx
+var import_react25 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var animationDuration = 0.2;
+var FoldableComponent = (0, import_react25.forwardRef)(function Foldable({
+  isOpen: controlledIsOpen,
+  defaultOpen = false,
+  title,
+  description,
+  icon,
+  image,
+  headerPaddingInline,
+  renderHeader,
+  onOpenChange,
+  children,
+  ...props
+}, ref) {
+  const theme2 = useTheme();
+  const bodyRef = (0, import_react25.useRef)(null);
+  const [internalIsOpen, setInternalIsOpen] = useBooleanState(defaultOpen);
+  const [bodyHeight, setBodyHeight] = (0, import_react25.useState)(defaultOpen ? void 0 : 0);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const open = (0, import_react25.useCallback)(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.setTrue();
+    onOpenChange?.(true);
+  }, [controlledIsOpen, onOpenChange]);
+  const close = (0, import_react25.useCallback)(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.setFalse();
+    onOpenChange?.(false);
+  }, [controlledIsOpen, onOpenChange]);
+  const toggleOpen = (0, import_react25.useCallback)(() => {
+    if (controlledIsOpen === void 0) setInternalIsOpen.toggle();
+    onOpenChange?.(!isOpen);
+  }, [controlledIsOpen, isOpen, onOpenChange]);
+  (0, import_react25.useEffect)(() => {
+    if (!bodyRef.current) return;
+    if (isOpen) {
+      const height = bodyRef.current.scrollHeight;
+      setBodyHeight(height);
+      const timeout = setTimeout(() => {
+        setBodyHeight(void 0);
+      }, animationDuration * 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    } else {
+      if (bodyHeight === void 0) {
+        const height = bodyRef.current.scrollHeight;
+        setBodyHeight(height);
+        bodyRef.current.offsetHeight;
+      }
+      const timeout = setTimeout(() => {
+        setBodyHeight(0);
+      }, 0.01 * 1e3);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [isOpen, animationDuration, bodyHeight]);
+  (0, import_react25.useImperativeHandle)(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+        toggle: toggleOpen,
+        isOpen
+      };
+    },
+    [open, close, toggleOpen, isOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { width: "100%", overflow: "hidden", ...props, children: [
+    renderHeader ? renderHeader(isOpen, toggleOpen) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      Div_default.row,
+      {
+        width: "100%",
+        alignItems: "center",
+        gap: theme2.styles.gap,
+        paddingBlock: theme2.styles.gap,
+        paddingInline: headerPaddingInline,
+        cursor: "pointer",
+        onClick: toggleOpen,
+        userSelect: "none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.row, { flex: 1, alignItems: "center", gap: theme2.styles.space, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
+            image && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { as: "h3", fontWeight: 700, children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            Icon_default,
+            {
+              name: "chevronDown",
+              transform: `rotate(${isOpen ? 180 : 0}deg)`,
+              transition: theme2.styles.transition
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { height: bodyHeight, transition: `height ${animationDuration}s ease`, ref: bodyRef, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { paddingBlock: theme2.styles.gap, paddingInline: headerPaddingInline, children }) })
+  ] });
+});
+FoldableComponent.box = (0, import_react25.forwardRef)(function Box3({ ...props }, ref) {
+  const theme2 = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    FoldableComponent,
+    {
+      backgroundColor: theme2.colors.backgroundContent,
+      border: `1px solid ${theme2.colors.border}`,
+      borderRadius: theme2.styles.borderRadius,
+      headerPaddingInline: theme2.styles.space,
+      ...props,
+      ref
+    }
+  );
+});
+var Foldable2 = (0, import_react25.memo)(FoldableComponent);
+Foldable2.box = FoldableComponent.box;
+var Foldable_default = Foldable2;
+
 // src/utils/variableFunctions.ts
 var checkBetterHtmlContextValue = (value, functionsName) => {
   if (value === void 0) {
@@ -6617,6 +6930,7 @@ var reactRouterDomPlugin = {
   Div,
   Divider,
   Dropdown,
+  Foldable,
   Form,
   FormRow,
   Icon,
@@ -6628,6 +6942,7 @@ var reactRouterDomPlugin = {
   PageHeader,
   PageHolder,
   Table,
+  Tabs,
   Text,
   ToggleInput,
   formatPhoneNumber,