react-better-html 1.1.232 → 1.1.234

package/dist/index.mjs

@@ -17,7 +17,9 @@ import {
   useBooleanState as useBooleanState9,
   useDebounceState as useDebounceState3,
   loaderControls,
-  colorThemeControls as colorThemeControls2
+  colorThemeControls as colorThemeControls2,
+  generateApi,
+  generateEventEmitter
 } from "react-better-core";
 
 // src/components/BetterHtmlProvider.tsx
@@ -888,7 +890,7 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   );
   const insideInputFieldComponentProps = useMemo(
     () => ({
-      border: `1px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
+      border: `${theme2.styles.borderWidth}px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
       borderTop: "none",
       opacity: !isOpen ? 0 : void 0,
       pointerEvents: !isOpen ? "none" : void 0,
@@ -1409,7 +1411,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
     Div_default.row,
     {
       backgroundColor: backgroundColor ?? theme2.colors.backgroundSecondary,
-      border: `solid 1px ${theme2.colors.border}`,
+      border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       borderRadius: 999,
       alignItems: "center",
       justifyContent: "center",
@@ -1424,7 +1426,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
     {
       width: size,
       height: size,
-      border: `solid 1px ${theme2.colors.border}`,
+      border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       borderRadius: 999,
       objectFit: "cover",
       ref,
@@ -1722,7 +1724,7 @@ DivComponent.box = forwardRef6(function Box({
     {
       color: isActive ? theme2.colors.base : void 0,
       backgroundColor: isActive ? readyActiveColor : theme2.colors.backgroundContent,
-      border: `1px solid ${isActive ? readyActiveColor : theme2.colors.border}`,
+      border: `${theme2.styles.borderWidth}px solid ${isActive ? readyActiveColor : theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
       borderColorHover: withClick && !isActive ? readyActiveColor : void 0,
       filterHover: withClick && isActive ? "brightness(0.9)" : void 0,
@@ -1736,8 +1738,8 @@ DivComponent.box = forwardRef6(function Box({
           Div2,
           {
             backgroundColor: headerBackgroundColor,
-            borderTopLeftRadius: props.borderTopLeftRadius ?? props.borderRadius ?? theme2.styles.borderRadius - 1,
-            borderTopRightRadius: props.borderTopRightRadius ?? props.borderRadius ?? theme2.styles.borderRadius - 1,
+            borderTopLeftRadius: props.borderTopLeftRadius ?? props.borderRadius ?? theme2.styles.borderRadius - theme2.styles.borderWidth,
+            borderTopRightRadius: props.borderTopRightRadius ?? props.borderRadius ?? theme2.styles.borderRadius - theme2.styles.borderWidth,
             marginInline: -theme2.styles.space,
             marginTop: -theme2.styles.space,
             marginBottom: theme2.styles.space,
@@ -1764,7 +1766,7 @@ DivComponent.box = forwardRef6(function Box({
                   marginBottom: theme2.styles.space
                 }
               ),
-              /* @__PURE__ */ jsx6(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ jsx6(Divider_default.horizontal, {}) })
+              /* @__PURE__ */ jsx6(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ jsx6(Divider_default.horizontal, { width: theme2.styles.borderWidth }) })
             ]
           }
         ),
@@ -1930,7 +1932,7 @@ var ButtonElement = styled6.button.withConfig({
    background-color: ${(props) => props.theme.colors.primary};
    border: none;
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
-   padding: ${(props) => props.isSmall ? `${props.theme.styles.gap + 1}px ${props.theme.styles.space}px` : `${(props.theme.styles.gap + props.theme.styles.space) / 2 + 1}px ${props.theme.styles.space + (props.withText ? props.theme.styles.gap : 0)}px`};
+   padding: ${(props) => props.isSmall ? `${props.theme.styles.gap + props.theme.styles.borderWidth}px ${props.theme.styles.space}px` : `${(props.theme.styles.gap + props.theme.styles.space) / 2 + props.theme.styles.borderWidth}px ${props.theme.styles.space + (props.withText ? props.theme.styles.gap : 0)}px`};
    user-select: none;
    flex-shrink: 0;
    transition: ${(props) => props.theme.styles.transition};
@@ -1952,7 +1954,7 @@ var ButtonElement = styled6.button.withConfig({
 
    &.secondary {
       padding-block: ${(props) => props.isSmall ? props.theme.styles.gap : (props.theme.styles.space + props.theme.styles.gap) / 2}px;
-      border: solid 1px ${(props) => props.theme.colors.border};
+      border: solid ${(props) => props.theme.styles.borderWidth}px ${(props) => props.theme.colors.border};
       background-color: ${(props) => props.theme.colors.backgroundContent};
       background-image: none;
 
@@ -2428,7 +2430,7 @@ var ModalComponent = forwardRef7(function Modal({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ jsx9(Divider_default.horizontal, {})
+                    /* @__PURE__ */ jsx9(Divider_default.horizontal, { width: theme2.styles.borderWidth })
                   ] }) : /* @__PURE__ */ jsx9(Fragment, { children: !withoutCloseButton && /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
                   /* @__PURE__ */ jsx9(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
@@ -3031,7 +3033,8 @@ function BetterHtmlProvider({ config, ...props }) {
         ...assets,
         ...config?.assets
       },
-      loaders: config?.loaders
+      loaders: config?.loaders,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3419,7 +3422,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
     {
       color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
       backgroundColor: readyColor + "40",
-      border: `1px solid ${readyColor}`,
+      border: `${theme2.styles.borderWidth}px solid ${readyColor}`,
       ref,
       ...props
     }
@@ -3752,7 +3755,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
         {
           width: "100%",
           backgroundColor: theme2.colors.backgroundContent,
-          border: `solid 1px ${theme2.colors.border}`,
+          border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
           borderColor: isFocused ? theme2.colors.primary : void 0,
           borderBottom: "none",
           borderTopLeftRadius: theme2.styles.borderRadius,
@@ -3799,7 +3802,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
             width: "100%",
             maxHeight: 300,
             backgroundColor: theme2.colors.backgroundContent,
-            border: `1px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
+            border: `${theme2.styles.borderWidth}px solid ${isFocused ? theme2.colors.primary : theme2.colors.border}`,
             borderTop: "none",
             borderBottomLeftRadius: theme2.styles.borderRadius,
             borderBottomRightRadius: theme2.styles.borderRadius,
@@ -4065,7 +4068,7 @@ function Calendar({ value, minDate, maxDate, onChange }) {
             justifyContent: "center",
             backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
             filterHover: day && !isDisabled ? "brightness(0.9)" : void 0,
-            border: `1px solid ${isToday ? theme2.colors.primary : theme2.colors.primary + "00"}`,
+            border: `${theme2.styles.borderWidth}px solid ${isToday ? theme2.colors.primary : theme2.colors.primary + "00"}`,
             borderRadius: theme2.styles.borderRadius / 2,
             padding: theme2.styles.space / 2,
             cursor: day ? !isDisabled ? "pointer" : "not-allowed" : void 0,
@@ -4142,7 +4145,7 @@ var InputElement = styled10.input.withConfig({
    line-height: 20px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
-   border: 1px solid ${(props) => props.theme.colors.border};
+   border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
    border-top-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
    border-bottom-left-radius: ${(props) => props.withPrefix ? 0 : void 0};
@@ -4221,7 +4224,7 @@ var InputElement = styled10.input.withConfig({
    }
 
    &.react-better-html-dropdown {
-      padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - 1}px;
+      padding-right: ${(props) => props.theme.styles.space + 16 + props.theme.styles.space - props.theme.styles.borderWidth}px;
 
       &.react-better-html-dropdown-multiselect {
          border-top: none;
@@ -4265,12 +4268,12 @@ var TextareaElement = styled10.textarea.withConfig({
    line-height: 20px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
-   border: 1px solid ${(props) => props.theme.colors.border};
+   border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius}px;
    outline: none;
    padding: ${(props) => `${(props.theme.styles.gap + props.theme.styles.space) / 2}px ${props.theme.styles.space}px`};
-   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
-   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - 1}px` : void 0};
+   padding-left: ${(props) => props.withLeftIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - props.theme.styles.borderWidth}px` : void 0};
+   padding-right: ${(props) => props.withRightIcon ? `${props.theme.styles.space + 16 + props.theme.styles.space - props.theme.styles.borderWidth}px` : void 0};
    resize: vertical;
    transition: border-color ${(props) => props.theme.styles.transition};
 
@@ -4356,7 +4359,7 @@ var InputFieldComponent = forwardRef11(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme2.colors.border}`,
+          border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderRight: "none",
           backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
           borderTopLeftRadius: theme2.styles.borderRadius,
@@ -4373,8 +4376,8 @@ var InputFieldComponent = forwardRef11(function InputField({
             {
               name: leftIcon,
               position: "absolute",
-              top: (props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 46) / 2,
-              left: theme2.styles.space + 1,
+              top: ((props.type === "date" || props.type === "time" || props.type === "datetime-local" ? 48 : 44) + theme2.styles.borderWidth * 2) / 2,
+              left: theme2.styles.space + theme2.styles.borderWidth,
               transform: "translateY(-50%)",
               pointerEvents: "none",
               zIndex: leftIconZIndex
@@ -4405,8 +4408,8 @@ var InputFieldComponent = forwardRef11(function InputField({
             {
               icon: rightIcon,
               position: "absolute",
-              top: 46 / 2,
-              right: theme2.styles.space + 1 - theme2.styles.space / 2,
+              top: (44 + theme2.styles.borderWidth * 2) / 2,
+              right: theme2.styles.space + theme2.styles.borderWidth - theme2.styles.space / 2,
               transform: "translateY(-50%)",
               onClick: onClickRightIcon
             }
@@ -4415,8 +4418,8 @@ var InputFieldComponent = forwardRef11(function InputField({
             {
               name: rightIcon,
               position: "absolute",
-              top: 46 / 2,
-              right: theme2.styles.space + 1,
+              top: (44 + theme2.styles.borderWidth * 2) / 2,
+              right: theme2.styles.space + theme2.styles.borderWidth,
               transform: "translateY(-50%)",
               pointerEvents: "none"
             }
@@ -4429,7 +4432,7 @@ var InputFieldComponent = forwardRef11(function InputField({
         {
           alignItems: "center",
           justifyContent: "center",
-          border: `1px solid ${theme2.colors.border}`,
+          border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderLeft: "none",
           backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
           borderTopRightRadius: theme2.styles.borderRadius,
@@ -4486,8 +4489,8 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
         {
           name: leftIcon,
           position: "absolute",
-          top: 46 / 2,
-          left: theme2.styles.space + 1,
+          top: (44 + theme2.styles.borderWidth * 2) / 2,
+          left: theme2.styles.space + theme2.styles.borderWidth,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -4515,8 +4518,8 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
         {
           icon: rightIcon,
           position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1 - theme2.styles.space / 2,
+          top: (44 + theme2.styles.borderWidth * 2) / 2,
+          right: theme2.styles.space + theme2.styles.borderWidth - theme2.styles.space / 2,
           transform: "translateY(-50%)",
           onClick: onClickRightIcon
         }
@@ -4525,8 +4528,8 @@ InputFieldComponent.multiline = forwardRef11(function Multiline({
         {
           name: rightIcon,
           position: "absolute",
-          top: 46 / 2,
-          right: theme2.styles.space + 1,
+          top: (44 + theme2.styles.borderWidth * 2) / 2,
+          right: theme2.styles.space + theme2.styles.borderWidth,
           transform: "translateY(-50%)",
           pointerEvents: "none"
         }
@@ -5193,7 +5196,7 @@ var InputElement2 = styled11.input.withConfig({
    width: ${componentSize}px;
    height: ${componentSize}px;
    background-color: ${(props) => props.theme.colors.backgroundContent};
-   border: 1px solid ${(props) => props.theme.colors.border};
+   border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
    border-radius: ${(props) => props.theme.styles.borderRadius / 2}px;
    cursor: pointer;
    transition: ${(props) => props.theme.styles.transition};
@@ -5509,7 +5512,7 @@ var FormComponent = forwardRef13(function Form({
   return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
       child,
-      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, {})
+      index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, { width: theme2.styles.borderWidth })
     ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ jsxs16(
       Div_default.row,
@@ -5839,45 +5842,45 @@ var TableStyledComponent = styled12.table.withConfig({
 
    thead {
       tr:first-child {
-         border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
-         border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
+         border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
 
          th:first-child {
-            border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
 
          th:last-child {
-            border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
       }
    }
 
    tbody {
       tr:last-child {
-         border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
-         border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
+         border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
 
          td:first-child {
-            border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
 
          td:last-child {
-            border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
       }
    }
 
    tfoot {
       tr:last-child {
-         border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
-         border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
+         border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
 
          td:first-child {
-            border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
 
          td:last-child {
-            border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+            border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - props.theme.styles.borderWidth}px` : void 0};
          }
       }
    }
@@ -5927,7 +5930,8 @@ var TableStyledComponent = styled12.table.withConfig({
       }
 
       td {
-         border-top: 1px solid ${(props) => props.theme.colors.border + (props.colorTheme === "light" ? "60" : "40")};
+         border-top: ${(props) => props.theme.styles.borderWidth}px solid
+            ${(props) => props.theme.colors.border + (props.colorTheme === "light" ? "60" : "40")};
          padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
 
          &.noData {
@@ -6331,25 +6335,21 @@ var TableComponent = forwardRef15(function Table({
   useEffect12(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  useImperativeHandle2(
-    ref,
-    () => {
-      return {
-        currentPage,
-        setCurrentPage,
-        pagesCount: pageCountInternal,
-        setCheckedItems
-      };
-    },
-    [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]
-  );
+  useImperativeHandle2(ref, () => {
+    return {
+      currentPage,
+      setCurrentPage,
+      pagesCount: pageCountInternal,
+      setCheckedItems
+    };
+  }, [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]);
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
   return /* @__PURE__ */ jsxs20(Fragment7, { children: [
     /* @__PURE__ */ jsx23(
       Div_default,
       {
-        border: `1px solid ${theme2.colors.border}`,
+        border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
         borderRadius: theme2.styles.borderRadius * 2,
         overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
@@ -6715,7 +6715,7 @@ var Arrow = memo24(function Arrow2(props) {
     }),
     [props, theme2]
   );
-  const borderWidth = 1;
+  const borderWidth = theme2.styles.borderWidth;
   return /* @__PURE__ */ jsx24(
     Div_default,
     {
@@ -6835,17 +6835,13 @@ var TooltipComponent = forwardRef16(function Tooltip({
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
-  useImperativeHandle3(
-    ref,
-    () => {
-      return {
-        isOpen,
-        open: openTooltip,
-        close: closeTooltip
-      };
-    },
-    [isOpen, openTooltip, closeTooltip]
-  );
+  useImperativeHandle3(ref, () => {
+    return {
+      isOpen,
+      open: openTooltip,
+      close: closeTooltip
+    };
+  }, [isOpen, openTooltip, closeTooltip]);
   return /* @__PURE__ */ jsxs21(
     Div_default,
     {
@@ -6969,7 +6965,7 @@ TooltipComponent.item = forwardRef16(function Item({
 });
 TooltipComponent.divider = forwardRef16(function DividerComponent(props, ref) {
   const theme2 = useTheme26();
-  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ jsx24(Divider_default.horizontal, { width: theme2.styles.borderWidth, marginBlock: theme2.styles.gap, ...props, ref });
 });
 TooltipComponent.sectionTitle = forwardRef16(function SectionTitle({ text, ...props }, ref) {
   const theme2 = useTheme26();
@@ -7086,16 +7082,12 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
       );
     };
   }, []);
-  useImperativeHandle4(
-    ref,
-    () => {
-      return {
-        selectedTab,
-        selectTab: onClickTab
-      };
-    },
-    [selectedTab, onClickTab]
-  );
+  useImperativeHandle4(ref, () => {
+    return {
+      selectedTab,
+      selectTab: onClickTab
+    };
+  }, [selectedTab, onClickTab]);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
@@ -7109,7 +7101,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
             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,
+            border: style === "box" ? `${theme2.styles.borderWidth}px 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,
@@ -7304,7 +7296,7 @@ var FoldableComponent = forwardRef18(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ jsx26(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx26(Divider_default.horizontal, { width: theme2.styles.borderWidth }) }),
     /* @__PURE__ */ jsx26(
       Div_default,
       {
@@ -7325,7 +7317,7 @@ FoldableComponent.box = forwardRef18(function Box3({ ...props }, ref) {
     FoldableComponent,
     {
       backgroundColor: theme2.colors.backgroundContent,
-      border: `1px solid ${theme2.colors.border}`,
+      border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
       borderRadius: theme2.styles.borderRadius,
       headerPaddingBlock: (theme2.styles.gap + theme2.styles.space) / 2,
       headerPaddingInline: theme2.styles.space,
@@ -7605,7 +7597,7 @@ var SideMenuComponent = function SideMenu({
       top: topSpace,
       left: 0,
       backgroundColor: readyBackgroundColor,
-      borderRight: `solid 1px ${theme2.colors.border}`,
+      borderRight: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
@@ -7673,7 +7665,7 @@ var SideMenuComponent = function SideMenu({
             readyBottomItems && /* @__PURE__ */ jsx27(
               Div_default.column,
               {
-                borderTop: mediaQuery.size1000 ? `solid 1px ${theme2.colors.border}` : void 0,
+                borderTop: mediaQuery.size1000 ? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
                 gap: theme2.styles.gap / 2,
                 marginTop: "auto",
                 paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
@@ -7695,7 +7687,7 @@ var SideMenuComponent = function SideMenu({
           isCollapsable && /* @__PURE__ */ jsx27(
             Div_default,
             {
-              borderTop: `solid 1px ${theme2.colors.border}`,
+              borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
               marginTop: !readyBottomItems ? "auto" : void 0,
               paddingInline: theme2.styles.space,
               paddingBlock: theme2.styles.space,
@@ -7733,7 +7725,7 @@ var SideMenuComponent = function SideMenu({
             top: theme2.styles.space,
             left: "100%",
             backgroundColor: readyBackgroundColor,
-            border: `solid 1px ${theme2.colors.border}`,
+            border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
             borderLeft: "none",
             borderTopRightRadius: theme2.styles.borderRadius,
             borderBottomRightRadius: theme2.styles.borderRadius,
@@ -7891,6 +7883,8 @@ export {
   eventStopPropagation,
   filterHover,
   formatPhoneNumber,
+  generateApi,
+  generateEventEmitter,
   generateLocalStorage,
   generateRandomString,
   getBrowser,