react-better-html 1.1.233 → 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 })
                 ]
@@ -3001,8 +3003,7 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
           tabsWithDots,
           setTabsWithDots
         }
-      },
-      devMode: config?.devMode
+      }
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
@@ -3032,7 +3033,8 @@ function BetterHtmlProvider({ config, ...props }) {
         ...assets,
         ...config?.assets
       },
-      loaders: config?.loaders
+      loaders: config?.loaders,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3041,8 +3043,7 @@ function BetterHtmlProvider({ config, ...props }) {
       app: config?.app,
       sideMenuIsCollapsed: config?.sideMenuIsCollapsed,
       sideMenuIsOpenMobile: config?.sideMenuIsOpenMobile,
-      components: config?.components,
-      devMode: config?.devMode
+      components: config?.components
     }),
     [config]
   );
@@ -3202,12 +3203,6 @@ function findClosestNumber(numbers, target) {
   }
   return closest;
 }
-var constructQuery = (query) => {
-  if (!query) return "";
-  return Object.entries(query).filter(([_, queryVale]) => queryVale !== void 0 && queryVale !== null).map(
-    ([queryName, queryVale]) => typeof queryVale === "object" ? queryVale.map((value) => `${queryName}=${value}`) : [`${queryName}=${queryVale}`]
-  ).flat().join("&");
-};
 
 // src/utils/localStorage.ts
 function generateLocalStorage() {
@@ -3274,180 +3269,6 @@ function generateLocalStorage() {
   };
 }
 
-// src/utils/logger.ts
-var textColors = {
-  black: "#111111",
-  red: "#f83e4b",
-  green: "#5ac53a",
-  yellow: "#f8d770",
-  blue: "#3d6fdf",
-  magenta: "#9648eb",
-  cyan: "#53b2c8",
-  white: "#f8f8f8"
-};
-var backgroundColors = {
-  black: "#111111",
-  red: "#f83e4b",
-  green: "#5ac53a",
-  yellow: "#f8d770",
-  blue: "#3d6fdf",
-  magenta: "#9648eb",
-  cyan: "#53b2c8",
-  white: "#f8f8f8"
-};
-var logTypes = {
-  info: "cyan",
-  success: "green",
-  warn: "yellow",
-  error: "red"
-};
-function getCssString(options) {
-  const color = options.color ? textColors[options.color] : void 0;
-  const backgroundColor = options.backgroundColor ? backgroundColors[options.backgroundColor] : void 0;
-  const fontWeight = options.bold ? "bold" : "normal";
-  return `${color ? `color: ${color};` : ""}${backgroundColor ? `background-color: ${backgroundColor};` : ""}${fontWeight ? `font-weight: ${fontWeight};` : ""}`;
-}
-function logText(text, options) {
-  if (externalBetterHtmlContextValue?.devMode !== true) return;
-  console.log(`%c${text}`, getCssString(options ?? {}));
-}
-var log = {
-  ...Object.entries(logTypes).reduce(
-    (previousValue, [logType, color]) => {
-      previousValue[logType] = (text = "", bold) => {
-        logText(text, {
-          color,
-          bold
-        });
-      };
-      return previousValue;
-    },
-    {}
-  ),
-  /** @description Default log function */
-  log: (text, options) => {
-    logText(text, options);
-  },
-  /** @description Logs the value in pretty json format */
-  json: (jsonObject, options) => {
-    logText(JSON.stringify(jsonObject, null, 4), options);
-  },
-  /** @description Logs a -=-= pattern */
-  divider: (color) => {
-    logText("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-", {
-      color
-    });
-  },
-  trace: () => {
-    if (externalBetterHtmlContextValue?.devMode !== true) return;
-    console.trace();
-  }
-};
-
-// src/utils/api.ts
-var methodInitiateToString = {
-  GET: "GET request to      ",
-  PUT: "PUT request to      ",
-  POST: "POST request to     ",
-  PATCH: "PATCH request to    ",
-  DELETE: "DELETE request to   ",
-  HEAD: "HEAD request to     ",
-  OPTIONS: "OPTIONS request to  ",
-  TRACE: "TRACE request to    ",
-  CONNECT: "CONNECT request to  "
-};
-var methodResponseToString = {
-  GET: "GET request from    ",
-  PUT: "PUT request from    ",
-  POST: "POST request from   ",
-  PATCH: "PATCH request from  ",
-  DELETE: "DELETE request from ",
-  HEAD: "HEAD request from   ",
-  OPTIONS: "OPTIONS request from",
-  TRACE: "TRACE request from  ",
-  CONNECT: "CONNECT request from"
-};
-function generateApi(config, apiConfig, getHeaders) {
-  return async function apiCall(name, payload = {}) {
-    if (!apiConfig[name]) {
-      return Promise.reject(
-        new Error(`Endpoint ${name.toString()} is not defined in the \`generateApi\` function.`, {
-          cause: "generateApi.apiConfig.missingEndpoint"
-        })
-      );
-    }
-    const baseURL = config.baseUrl;
-    const path = `${apiConfig[name].path}${payload.path?.length ? `/${payload.path.join("/")}` : ""}`;
-    const query = constructQuery(payload.query);
-    const url = `${baseURL}${path}${query ? `?${query}` : ""}`;
-    const requestHeaders = {
-      "Content-Type": apiConfig[name].bodyWithFormData ? "multipart/form-data" : "application/json",
-      ...getHeaders ? Object.entries(getHeaders).reduce((previousValue, [key, value]) => {
-        if (apiConfig[name].includeHeaders?.includes(key)) {
-          previousValue[key] = value?.();
-        }
-        return previousValue;
-      }, {}) : {}
-    };
-    const body = payload.body;
-    const bodyAsFormData = new FormData();
-    if (body && apiConfig[name].bodyWithFormData) {
-      Object.entries(body).forEach(([key, value]) => {
-        bodyAsFormData.append(key, value);
-      });
-    }
-    const readyBody = JSON.stringify((apiConfig[name].bodyWithFormData ? bodyAsFormData : body) ?? {});
-    log.log(`Initiate ${methodInitiateToString[apiConfig[name].method]} ${url} - ${name.toString()}`, {
-      color: "magenta"
-    });
-    return await call(
-      () => fetch(url, {
-        method: apiConfig[name].method,
-        body: apiConfig[name].method !== "GET" ? readyBody : void 0,
-        headers: requestHeaders
-      })
-    );
-    async function call(callAction) {
-      const response = await callAction();
-      const responseJson = await response.json();
-      log.log(`Response ${methodResponseToString[apiConfig[name].method]} ${url} - ${name.toString()}`, {
-        color: "blue"
-      });
-      return {
-        data: responseJson,
-        headers: response.headers,
-        statusCode: response.status,
-        statusText: response.statusText,
-        url: response.url,
-        ok: response.ok,
-        redirected: response.redirected
-      };
-    }
-  };
-}
-
-// src/utils/eventEmitter.ts
-function generateEventEmitter() {
-  const eventEmitter = new EventTarget();
-  return {
-    emit: (name, data) => {
-      const event = new CustomEvent(name.toString(), {
-        detail: data
-      });
-      eventEmitter.dispatchEvent(event);
-    },
-    listen: (name, callback) => {
-      const listener = (event) => {
-        callback?.(event.detail);
-      };
-      eventEmitter.addEventListener(name.toString(), listener);
-      return () => {
-        eventEmitter.removeEventListener(name.toString(), listener);
-      };
-    }
-  };
-}
-
 // src/components/PageHolder.tsx
 import { forwardRef as forwardRef8, memo as memo13 } from "react";
 import { useTheme as useTheme14 } from "react-better-core";
@@ -3601,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
     }
@@ -3934,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,
@@ -3981,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,
@@ -4247,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,
@@ -4324,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};
@@ -4403,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;
@@ -4447,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};
 
@@ -4538,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,
@@ -4555,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
@@ -4587,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
             }
@@ -4597,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"
             }
@@ -4611,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,
@@ -4668,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"
         }
@@ -4697,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
         }
@@ -4707,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"
         }
@@ -5375,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};
@@ -5691,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,
@@ -6021,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};
          }
       }
    }
@@ -6109,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 {
@@ -6513,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,
@@ -6897,7 +6715,7 @@ var Arrow = memo24(function Arrow2(props) {
     }),
     [props, theme2]
   );
-  const borderWidth = 1;
+  const borderWidth = theme2.styles.borderWidth;
   return /* @__PURE__ */ jsx24(
     Div_default,
     {
@@ -7017,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,
     {
@@ -7151,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();
@@ -7268,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) => {
@@ -7291,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,
@@ -7486,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,
       {
@@ -7507,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,
@@ -7787,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,
@@ -7855,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,
@@ -7877,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,
@@ -7915,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,