react-better-html 1.1.79 → 1.1.81

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,
@@ -1544,6 +1546,10 @@ var appConfig = {
 // src/components/BetterHtmlProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var GlobalStyle = import_styled_components.createGlobalStyle`
+   html {
+      background-color: ${(props) => props.backgroundColor};
+   }
+
    body {
       font-family: ${(props) => props.fontFamily};
       color: ${(props) => props.color};
@@ -1574,9 +1580,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, componentsState, ...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 +1657,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 +1700,17 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
       components: {
         ...value?.components
       },
-      plugins
+      plugins,
+      componentsState: {
+        tabs: {
+          tabGroups,
+          setTabGroups,
+          tabsWithDots,
+          setTabsWithDots
+        }
+      }
     }),
-    [value, colorTheme, loaders, plugins]
+    [value, colorTheme, loaders, plugins, tabGroups, tabsWithDots]
   );
   (0, import_react.useEffect)(() => {
     plugins.forEach((plugin) => {
@@ -2387,7 +2411,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 +2470,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 +2507,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 +2529,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 +2582,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 +2623,7 @@ var ButtonComponent = function Button({
     {
       as: href ? "a" : "button",
       theme: theme2,
+      colorTheme: betterHtmlContext2.colorTheme,
       isSmall,
       withText: text !== void 0,
       isLoading: isLoadingElement,
@@ -2664,7 +2685,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 +2698,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 +2711,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 +2735,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 +2857,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 +2865,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 +3068,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 +3099,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) }),
@@ -4881,7 +4903,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, 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,
       {
@@ -4901,7 +4923,6 @@ var DropdownComponent = (0, import_react16.forwardRef)(function Dropdown({
         onFocus: setIsFocused.setTrue,
         onBlur: setIsFocused.setFalse,
         onKeyDown: onKeyDownInputField,
-        holderRef: inputFieldHolderRef,
         onChangeValue: withSearch ? onChangeValue : void 0,
         insideInputFieldComponent: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Div_default,
@@ -5976,6 +5997,8 @@ var InputElement2 = import_styled_components10.default.input.withConfig({
    ${(props) => props.normalStyle}
 
    &:hover {
+      border-color: ${(props) => props.theme.colors.primary};
+
       ${(props) => props.hoverStyle}
    }
 `;
@@ -6461,7 +6484,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)(
@@ -6571,6 +6594,302 @@ 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, componentsState } = useBetterHtmlContextInternal();
+  const firstRenderPassedRef = (0, import_react24.useRef)(false);
+  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 spacing = 0;
+    Object.values(tabsRef.current).forEach((tab, index) => {
+      if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
+    });
+    return spacing;
+  }, [selectedTab, tabs, tabsGap]);
+  (0, import_react24.useEffect)(() => {
+    const timeout = setTimeout(() => {
+      setRerenderState(Math.random());
+      firstRenderPassedRef.current = true;
+    }, 0.01 * 1e3);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  (0, import_react24.useEffect)(() => {
+    componentsState.tabs.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]);
+  (0, import_react24.useEffect)(() => {
+    tabsRef.current[selectedTab]?.scrollIntoView({
+      behavior: firstRenderPassedRef.current ? "smooth" : void 0,
+      block: "nearest"
+    });
+  }, [selectedTab]);
+  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: [
+              componentsState.tabs.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: firstRenderPassedRef.current ? theme2.styles.transition : "none"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Div_default, { width: "100%", children })
+  ] });
+};
+TabsComponent.content = function Content({ tab, tabWithDot, tabsGroupName, children }) {
+  const { componentsState } = useBetterHtmlContextInternal();
+  const thisTabGroupData = (0, import_react24.useMemo)(
+    () => componentsState.tabs.tabGroups.find((item) => item.name === (tabsGroupName ?? defaultTabName)),
+    [componentsState.tabs, tabsGroupName]
+  );
+  (0, import_react24.useEffect)(() => {
+    if (tabWithDot) {
+      componentsState.tabs.setTabsWithDots?.((oldValue) => oldValue.includes(tab) ? oldValue : [...oldValue, tab]);
+    } else {
+      componentsState.tabs.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 animationDurationClose = 0.15;
+var animationDurationOpen = animationDurationClose * 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 [bodyVirtualHeight, setBodyVirtualHeight] = (0, import_react25.useState)(500);
+  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;
+    setBodyVirtualHeight(Math.min(500, bodyRef.current.scrollHeight * 2));
+  }, [isOpen]);
+  (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%", ...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,
+      {
+        maxHeight: isOpen ? bodyVirtualHeight : 0,
+        opacity: !isOpen ? 0 : void 0,
+        transition: `max-height ${isOpen ? animationDurationOpen : animationDurationClose}s ease, opacity ${theme2.styles.transition}`,
+        overflow: !isOpen ? "hidden" : void 0,
+        pointerEvents: !isOpen ? "none" : void 0,
+        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) {
@@ -6618,6 +6937,7 @@ var reactRouterDomPlugin = {
   Div,
   Divider,
   Dropdown,
+  Foldable,
   Form,
   FormRow,
   Icon,
@@ -6629,6 +6949,7 @@ var reactRouterDomPlugin = {
   PageHeader,
   PageHolder,
   Table,
+  Tabs,
   Text,
   ToggleInput,
   formatPhoneNumber,