react-better-html 1.1.233 → 1.1.234

package/dist/index.js

@@ -69,8 +69,8 @@ __export(index_exports, {
   eventStopPropagation: () => import_react_better_core30.eventStopPropagation,
   filterHover: () => filterHover,
   formatPhoneNumber: () => import_react_better_core30.formatPhoneNumber,
-  generateApi: () => generateApi,
-  generateEventEmitter: () => generateEventEmitter,
+  generateApi: () => import_react_better_core30.generateApi,
+  generateEventEmitter: () => import_react_better_core30.generateEventEmitter,
   generateLocalStorage: () => generateLocalStorage,
   generateRandomString: () => import_react_better_core30.generateRandomString,
   getBrowser: () => getBrowser,
@@ -961,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,
@@ -1482,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",
@@ -1497,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,
@@ -1795,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,
@@ -1809,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,
@@ -1837,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 }) })
             ]
           }
         ),
@@ -1999,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};
@@ -2021,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;
 
@@ -2493,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 })
                 ]
@@ -3066,8 +3066,7 @@ function BetterHtmlProviderInternal({ config, plugins, children }) {
           tabsWithDots,
           setTabsWithDots
         }
-      },
-      devMode: config?.devMode
+      }
     }),
     [config, alerts, sideMenuIsCollapsed, sideMenuIsOpenMobile, plugins, tabGroups, tabsWithDots]
   );
@@ -3097,7 +3096,8 @@ function BetterHtmlProvider({ config, ...props }) {
         ...assets,
         ...config?.assets
       },
-      loaders: config?.loaders
+      loaders: config?.loaders,
+      devMode: config?.devMode
     }),
     [config]
   );
@@ -3106,8 +3106,7 @@ function BetterHtmlProvider({ config, ...props }) {
       app: config?.app,
       sideMenuIsCollapsed: config?.sideMenuIsCollapsed,
       sideMenuIsOpenMobile: config?.sideMenuIsOpenMobile,
-      components: config?.components,
-      devMode: config?.devMode
+      components: config?.components
     }),
     [config]
   );
@@ -3267,12 +3266,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() {
@@ -3339,180 +3332,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
 var import_react15 = require("react");
 var import_react_better_core14 = require("react-better-core");
@@ -3666,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
     }
@@ -3985,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,
@@ -4032,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,
@@ -4298,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,
@@ -4375,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};
@@ -4454,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;
@@ -4498,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};
 
@@ -4589,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,
@@ -4606,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
@@ -4638,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
             }
@@ -4648,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"
             }
@@ -4662,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,
@@ -4719,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"
         }
@@ -4748,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
         }
@@ -4758,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"
         }
@@ -5426,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};
@@ -5742,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,
@@ -6062,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};
          }
       }
    }
@@ -6150,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 {
@@ -6554,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,
@@ -6938,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,
     {
@@ -7058,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,
     {
@@ -7192,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)();
@@ -7309,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) => {
@@ -7332,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,
@@ -7527,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,
       {
@@ -7548,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,
@@ -7823,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,
@@ -7891,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,
@@ -7913,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,
@@ -7951,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,