@fctc/sme-widget-ui 1.7.6 → 1.7.8

package/dist/index.d.mts

@@ -2,6 +2,6 @@ export { useClickOutside, useFileInfo } from './hooks.mjs';
 export { AddIcon, ArchiveIcon, ArrowDownIcon, ArrowRightIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DeleteIcon, DeleteIconDanger, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeIcon, FilterIcon, GoogleIcon, GroupByIcon, KanbanIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, VectorIcon, ZipIcon } from './icons.mjs';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.mjs';
 export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, ButtonField, ButtonSelectFiles, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FileUploadField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, IButtonProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IFileUploadProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, ImageField, InfomationField, IntegerField, LayerLoading, LoadingSmall, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, RadioGroupField, RatingStarField, RemainingDaysField, RenderFiles, Row, Search, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, VideoPlayer, usePagination } from './widgets.mjs';
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput } from './utils.mjs';
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput } from './utils.mjs';
 import 'react';
 import 'zod';

package/dist/index.d.ts

@@ -2,6 +2,6 @@ export { useClickOutside, useFileInfo } from './hooks.js';
 export { AddIcon, ArchiveIcon, ArrowDownIcon, ArrowRightIcon, AttachIcon, BackIcon, CalendarIcon, CheckIcon, ChevronBottomIcon, CloseIcon, CopyIcon, DeleteIcon, DeleteIconDanger, DownloadIcon, ExcelIcon, ExportIcon, EyeClosedIcon, EyeIcon, FilterIcon, GoogleIcon, GroupByIcon, KanbanIcon, ListIcon, LoadingIcon, MoreIcon, PaidIcon, PdfIcon, PlaceHolderIcon, PlayIcon, ResetIcon, SearchIcon, SettingIcon, StarIcon, TriangleIcon, UnArchiveIcon, VectorIcon, ZipIcon } from './icons.js';
 export { IInputFieldProps, LoginData, LoginProps, Provider, ValuePropsType, loginSchema } from './types.js';
 export { ActiveBadgeField, AvatarField, BinaryField, ButtonBadgeField, ButtonField, ButtonSelectFiles, CharField, CheckboxField, ColorField, ColorWrapper, CopyLinkButtonField, DateField, DateOptionField, DownLoadBinaryField, DownloadFileField, DropdownField, EmptyTable, FeeField, FileUploadField, FloatField, FloatTimeField, HtmlField, IActiveBadgeProps, IAvatarProps, IBinaryFieldProps, IButtonBadgeProps, IButtonProps, ICharFieldProps, IColorFieldProps, IColorWrapperProps, ICopyLinkButtonProps, IDateFieldProps, IDownLoadBinary, IDownloadFileProps, IDurationProps, IFileUploadProps, IMany2ManyTagsProps, IMonetaryProps, IOptionProps, IPaginationProps, IPriorityFieldProps, IRadioGroupProps, IRatingStarProps, ISelectDropdownProps, IStatusDropdownFieldProps, ImageField, InfomationField, IntegerField, LayerLoading, LoadingSmall, Login, Many2ManyField, Many2ManyProps, Many2ManyTagField, Many2OneField, Many2OneProps, ModalConfirm, ModalDetail, ModalLayer, MonetaryField, PaginationView, PaidBadgedField, PriorityField, RadioGroupField, RatingStarField, RemainingDaysField, RenderFiles, Row, Search, SelectDropdownField, StatusBarOptionField, StatusDropdownField, StatusbarDurationField, TDropdownSelectorProps, TableBody, TableFilter, TableFooter, TableGroup, TableHead, TextAreaField, ToggleButtonField, VideoPlayer, usePagination } from './widgets.js';
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput } from './utils.js';
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput } from './utils.js';
 import 'react';
 import 'zod';

package/dist/index.js

@@ -5046,7 +5046,6 @@ __export(index_exports, {
   loginSchema: () => loginSchema,
   parseFormattedNumber: () => parseFormattedNumber,
   range: () => range,
-  typeStyles: () => typeStyles,
   useClickOutside: () => useClickOutside,
   useFileInfo: () => useFileInfo,
   useFormatDate: () => useFormatDate,
@@ -7846,16 +7845,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18501,6 +18490,59 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 var import_jsx_runtime71 = require("react/jsx-runtime");
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out",
+  height: "fit-content !important"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18508,31 +18550,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
@@ -35566,7 +35598,6 @@ var DateOptionField = (props) => {
   loginSchema,
   parseFormattedNumber,
   range,
-  typeStyles,
   useClickOutside,
   useFileInfo,
   useFormatDate,

package/dist/index.mjs

@@ -7725,16 +7725,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18380,6 +18370,59 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 import { jsx as jsx71 } from "react/jsx-runtime";
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out",
+  height: "fit-content !important"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18387,31 +18430,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ jsx71("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ jsx71("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
@@ -35444,7 +35477,6 @@ export {
   loginSchema,
   parseFormattedNumber,
   range,
-  typeStyles,
   useClickOutside,
   useFileInfo,
   useFormatDate,

package/dist/utils.d.mts

@@ -21,20 +21,10 @@ declare const COLORS: {
     id: number;
 }[];
 declare const DOTS = "...";
-declare const typeStyles: {
-    primary: string;
-    secondary: string;
-    danger: string;
-    info: string;
-    success: string;
-    warning: string;
-    default: string;
-    light: string;
-};
 declare const SearchType: {
     FILTER: string;
     SEARCH: string;
     GROUP: string;
 };
 
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput };
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput };

package/dist/utils.d.ts

@@ -21,20 +21,10 @@ declare const COLORS: {
     id: number;
 }[];
 declare const DOTS = "...";
-declare const typeStyles: {
-    primary: string;
-    secondary: string;
-    danger: string;
-    info: string;
-    success: string;
-    warning: string;
-    default: string;
-    light: string;
-};
 declare const SearchType: {
     FILTER: string;
     SEARCH: string;
     GROUP: string;
 };
 
-export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, typeStyles, useFormatDate, validateAndParseDate, validateInput };
+export { COLORS, DOTS, SearchType, checkIsImageLink, convertFloatToTime, convertTimeToFloat, formatFileSize, formatFloatNumber, formatNumberOnly, getPasswordMessage, isBase64Image, isObjectEmpty, parseFormattedNumber, range, useFormatDate, validateAndParseDate, validateInput };

package/dist/utils.js

@@ -4071,7 +4071,6 @@ __export(utils_exports, {
   isObjectEmpty: () => isObjectEmpty,
   parseFormattedNumber: () => parseFormattedNumber,
   range: () => range,
-  typeStyles: () => typeStyles,
   useFormatDate: () => useFormatDate,
   validateAndParseDate: () => validateAndParseDate,
   validateInput: () => validateInput
@@ -4838,16 +4837,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -4869,7 +4858,6 @@ var SearchType = {
   isObjectEmpty,
   parseFormattedNumber,
   range,
-  typeStyles,
   useFormatDate,
   validateAndParseDate,
   validateInput

package/dist/utils.mjs

@@ -4814,16 +4814,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -4844,7 +4834,6 @@ export {
   isObjectEmpty,
   parseFormattedNumber,
   range,
-  typeStyles,
   useFormatDate,
   validateAndParseDate,
   validateInput

package/dist/widgets.js

@@ -5778,16 +5778,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18125,6 +18115,59 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 var import_jsx_runtime71 = require("react/jsx-runtime");
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out",
+  height: "fit-content !important"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18132,31 +18175,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx

package/dist/widgets.mjs

@@ -5715,16 +5715,6 @@ var COLORS = [
   }
 ];
 var DOTS = "...";
-var typeStyles = {
-  primary: "bg-blue-500 text-white",
-  secondary: "bg-lime-600 text-white",
-  danger: "bg-[rgba(237,28,36,0.1)]  text-[#F5222D]",
-  info: "bg-[rgba(5,152,237,0.12)] text-[rgb(5,152,237)]",
-  success: "bg-[rgba(46,181,83,0.1)] text-[rgb(46,181,83)]",
-  warning: "bg-[rgba(237,166,28,0.1)] text-[rgb(250,140,22)]",
-  default: "bg-[#dee2e6]",
-  light: "bg-white text-gray-800 shadow-md"
-};
 var SearchType = {
   FILTER: "filter_by",
   SEARCH: "search_by",
@@ -18062,6 +18052,59 @@ var BinaryField = (props) => {
 
 // src/widgets/basic/button-badge-field/button-badge.tsx
 import { jsx as jsx71 } from "react/jsx-runtime";
+var typeStyles = {
+  primary: {
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "1px solid #fff"
+  },
+  secondary: {
+    backgroundColor: "#EBF1FF",
+    color: "#2597D0",
+    border: "1px solid #35ADE9"
+  },
+  danger: {
+    backgroundColor: "#FFEBEC",
+    color: "#E93544",
+    border: "1px solid #FB2B3D"
+  },
+  info: {
+    backgroundColor: "rgba(5,152,237,0.12)",
+    color: "rgb(5,152,237)",
+    border: "1px solid rgb(5,152,237)"
+  },
+  success: {
+    backgroundColor: "#E0FAEB",
+    color: "#12AF53",
+    border: "1px solid #1FC163"
+  },
+  warning: {
+    backgroundColor: "#FFFAEB",
+    color: "#E6A819",
+    border: "1px solid #F6B51E"
+  },
+  default: {
+    backgroundColor: "#dee2e6",
+    color: "#000",
+    border: "1px solid #000"
+  },
+  light: {
+    backgroundColor: "#fff",
+    color: "#1f2937",
+    border: "1px solid #1f2937"
+  }
+};
+var baseStyle = {
+  borderRadius: "4px",
+  fontSize: "12px",
+  padding: "4px 8px",
+  width: "fit-content",
+  textAlign: "center",
+  fontWeight: 500,
+  cursor: "pointer",
+  transition: "all 0.3s ease-in-out",
+  height: "fit-content !important"
+};
 var ButtonBadgeField = (props) => {
   const { defaultValue, selection, value, formValues, domainHelper } = props;
   const decorationSuccess = props["decoration-success"] && domainHelper.checkDomain(formValues, props["decoration-success"]);
@@ -18069,31 +18112,21 @@ var ButtonBadgeField = (props) => {
   const decorationDanger = props["decoration-danger"] && domainHelper.checkDomain(formValues, props["decoration-danger"]);
   const decorationWarning = props["decoration-warning"] && domainHelper.checkDomain(formValues, props["decoration-warning"]);
   const getType = () => {
-    if (decorationInfo) {
-      return typeStyles["info"];
-    }
-    if (decorationSuccess) {
-      return typeStyles["success"];
-    }
-    if (decorationDanger) {
-      return typeStyles["danger"];
-    }
-    if (decorationWarning) {
-      return typeStyles["warning"];
-    }
+    if (decorationInfo) return typeStyles["info"];
+    if (decorationSuccess) return typeStyles["success"];
+    if (decorationDanger) return typeStyles["danger"];
+    if (decorationWarning) return typeStyles["warning"];
     return typeStyles["default"];
   };
-  const baseStyle = "rounded-full text-xs px-[0.82rem] w-fit py-1 text-center font-medium cursor-pointer transition duration-300 ease-in-out transform";
-  const buttonClass = `${baseStyle} ${getType()}`;
   const getLabel = (value2) => {
     if (!value2) return "";
-    const item = selection?.find((item2) => {
-      return Array.isArray(item2) && item2[0] === value2;
-    });
+    const item = selection?.find(
+      (item2) => Array.isArray(item2) && item2[0] === value2
+    );
     return item ? item[1] : "";
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ jsx71("div", { className: buttonClass, children: i18n_default.t(label) }) : null;
+  return label ? /* @__PURE__ */ jsx71("div", { style: { ...baseStyle, ...getType() }, children: i18n_default.t(label) }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",