react-better-html 1.1.232 → 1.1.234

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, OmitProps, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
-export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+import { Color, BetterCoreProviderConfig, DeepPartialRecord, OmitProps, BetterCoreConfig, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
+export { API, APIConfigItem, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, OmitProps, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
-export { AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+import { Color, BetterCoreProviderConfig, DeepPartialRecord, OmitProps, BetterCoreConfig, IconName, AnyOtherString, PartialRecord, AssetName, LoaderName, PickValue, Country } from 'react-better-core';
+export { API, APIConfigItem, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, lightenColor, loaderControls, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.js

@@ -69,6 +69,8 @@ __export(index_exports, {
   eventStopPropagation: () => import_react_better_core30.eventStopPropagation,
   filterHover: () => filterHover,
   formatPhoneNumber: () => import_react_better_core30.formatPhoneNumber,
+  generateApi: () => import_react_better_core30.generateApi,
+  generateEventEmitter: () => import_react_better_core30.generateEventEmitter,
   generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => import_react_better_core30.generateRandomString,
   getBrowser: () => getBrowser,
@@ -959,7 +961,7 @@ function useComponentInputFieldDateProps(props, holderRef, disabled) {
   );
   const insideInputFieldComponentProps = (0, import_react.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,
@@ -1480,7 +1482,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
     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",
@@ -1495,7 +1497,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
     {
       width: size,
       height: size,
-      border: `solid 1px ${theme2.colors.border}`,
+      border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
       borderRadius: 999,
       objectFit: "cover",
       ref,
@@ -1793,7 +1795,7 @@ DivComponent.box = (0, import_react8.forwardRef)(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,
@@ -1807,8 +1809,8 @@ DivComponent.box = (0, import_react8.forwardRef)(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,
@@ -1835,7 +1837,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
                   marginBottom: theme2.styles.space
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider_default.horizontal, {}) })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Div2, { width: `calc(100% + ${theme2.styles.space * 2}px)`, marginLeft: -theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth }) })
             ]
           }
         ),
@@ -1997,7 +1999,7 @@ var ButtonElement = import_styled_components6.default.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};
@@ -2019,7 +2021,7 @@ var ButtonElement = import_styled_components6.default.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;
 
@@ -2491,7 +2493,7 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, {})
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth })
                   ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button_default.icon, { icon: "XMark", iconColor: titleColor, onClick: onClickClose }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
@@ -3094,7 +3096,8 @@ function BetterHtmlProvider({ config, ...props }) {
         ...assets,
         ...config?.assets
       },
-      loaders: config?.loaders
+      loaders: config?.loaders,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3482,7 +3485,7 @@ ChipComponent.colored = (0, import_react16.forwardRef)(function Colored({ color,
     {
       color: colorTheme === "light" ? (0, import_react_better_core15.darkenColor)(readyColor, 0.7) : (0, import_react_better_core15.lightenColor)(readyColor, 0.7),
       backgroundColor: readyColor + "40",
-      border: `1px solid ${readyColor}`,
+      border: `${theme2.styles.borderWidth}px solid ${readyColor}`,
       ref,
       ...props
     }
@@ -3801,7 +3804,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(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,
@@ -3848,7 +3851,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(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,
@@ -4114,7 +4117,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,
@@ -4191,7 +4194,7 @@ var InputElement = import_styled_components11.default.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};
@@ -4270,7 +4273,7 @@ var InputElement = import_styled_components11.default.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;
@@ -4314,12 +4317,12 @@ var TextareaElement = import_styled_components11.default.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};
 
@@ -4405,7 +4408,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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" ? (0, import_react_better_core19.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme2.colors.backgroundContent, 0.1)),
           borderTopLeftRadius: theme2.styles.borderRadius,
@@ -4422,8 +4425,8 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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
@@ -4454,8 +4457,8 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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
             }
@@ -4464,8 +4467,8 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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"
             }
@@ -4478,7 +4481,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(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" ? (0, import_react_better_core19.darkenColor)(theme2.colors.backgroundContent, 0.03) : (0, import_react_better_core19.lightenColor)(theme2.colors.backgroundContent, 0.1)),
           borderTopRightRadius: theme2.styles.borderRadius,
@@ -4535,8 +4538,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         {
           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"
         }
@@ -4564,8 +4567,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         {
           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
         }
@@ -4574,8 +4577,8 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         {
           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"
         }
@@ -5242,7 +5245,7 @@ var InputElement2 = import_styled_components12.default.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};
@@ -5558,7 +5561,7 @@ var FormComponent = (0, import_react23.forwardRef)(function Form({
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react23.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react23.Fragment, { children: [
       child,
-      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, {})
+      index < import_react23.Children.toArray(children).length - 1 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth })
     ] }, index)) : children }) : children,
     submitButtonText && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Div_default.row,
@@ -5878,45 +5881,45 @@ var TableStyledComponent = import_styled_components13.default.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};
          }
       }
    }
@@ -5966,7 +5969,8 @@ var TableStyledComponent = import_styled_components13.default.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 {
@@ -6370,25 +6374,21 @@ var TableComponent = (0, import_react27.forwardRef)(function Table({
   (0, import_react27.useEffect)(() => {
     onChangeFilterDataValue?.(dataAfterFilter);
   }, [onChangeFilterDataValue, dataAfterFilter]);
-  (0, import_react27.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        currentPage,
-        setCurrentPage,
-        pagesCount: pageCountInternal,
-        setCheckedItems
-      };
-    },
-    [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]
-  );
+  (0, import_react27.useImperativeHandle)(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__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       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,
@@ -6754,7 +6754,7 @@ var Arrow = (0, import_react28.memo)(function Arrow2(props) {
     }),
     [props, theme2]
   );
-  const borderWidth = 1;
+  const borderWidth = theme2.styles.borderWidth;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     Div_default,
     {
@@ -6874,17 +6874,13 @@ var TooltipComponent = (0, import_react28.forwardRef)(function Tooltip({
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
-  (0, import_react28.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        isOpen,
-        open: openTooltip,
-        close: closeTooltip
-      };
-    },
-    [isOpen, openTooltip, closeTooltip]
-  );
+  (0, import_react28.useImperativeHandle)(ref, () => {
+    return {
+      isOpen,
+      open: openTooltip,
+      close: closeTooltip
+    };
+  }, [isOpen, openTooltip, closeTooltip]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     Div_default,
     {
@@ -7008,7 +7004,7 @@ TooltipComponent.item = (0, import_react28.forwardRef)(function Item({
 });
 TooltipComponent.divider = (0, import_react28.forwardRef)(function DividerComponent(props, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { marginBlock: theme2.styles.gap, ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth, marginBlock: theme2.styles.gap, ...props, ref });
 });
 TooltipComponent.sectionTitle = (0, import_react28.forwardRef)(function SectionTitle({ text, ...props }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
@@ -7125,16 +7121,12 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
       );
     };
   }, []);
-  (0, import_react29.useImperativeHandle)(
-    ref,
-    () => {
-      return {
-        selectedTab,
-        selectTab: onClickTab
-      };
-    },
-    [selectedTab, onClickTab]
-  );
+  (0, import_react29.useImperativeHandle)(ref, () => {
+    return {
+      selectedTab,
+      selectTab: onClickTab
+    };
+  }, [selectedTab, onClickTab]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
@@ -7148,7 +7140,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
             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,
@@ -7343,7 +7335,7 @@ var FoldableComponent = (0, import_react30.forwardRef)(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Divider_default.horizontal, { width: theme2.styles.borderWidth }) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Div_default,
       {
@@ -7364,7 +7356,7 @@ FoldableComponent.box = (0, import_react30.forwardRef)(function Box3({ ...props
     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,
@@ -7639,7 +7631,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,
@@ -7707,7 +7699,7 @@ var SideMenuComponent = function SideMenu({
             readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               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,
@@ -7729,7 +7721,7 @@ var SideMenuComponent = function SideMenu({
           isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             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,
@@ -7767,7 +7759,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,
@@ -7926,6 +7918,8 @@ var SideMenu_default = SideMenu2;
   eventStopPropagation,
   filterHover,
   formatPhoneNumber,
+  generateApi,
+  generateEventEmitter,
   generateLocalStorage,
   generateRandomString,
   getBrowser,