@fctc/sme-widget-ui 2.5.4 → 2.5.6

package/dist/widgets.js

@@ -10016,7 +10016,7 @@ var Row = (props) => {
             `${col.name}____${index4}`
           );
         }),
-        typeof onAddRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        typeof onRemoveRow === "function" && row?.display_type !== "line_section" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("td", { className: "relative p-2 w-[35px]", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "h-full w-full flex items-center justify-end cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "button",
           {
             type: "button",
@@ -16246,7 +16246,7 @@ var BinaryField = (props) => {
             "div",
             {
               ref: binaryRef,
-              className: `binary-field flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
+              className: `widget binary-field flex w-fit items-center gap-4 ${onlyImage && initialFile ? "shadow-md rounded-lg" : ""}`,
               children: hasFile ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 "div",
                 {
@@ -16482,7 +16482,7 @@ var ButtonBadgeField = (props) => {
     return item && type === "selection" && Array.isArray(item) ? item[1] : item;
   };
   const label = getLabel(defaultValue ?? value);
-  return label ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { style: { ...baseStyle, ...getType() }, children: label }) : null;
+  return label ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "widget badge-widget", style: { ...baseStyle, ...getType() }, children: label }) : null;
 };
 
 // src/widgets/basic/button-field/button.tsx
@@ -16547,7 +16547,8 @@ var CharField = (props) => {
     isForm,
     value,
     defaultValue,
-    options: options2
+    options: options2,
+    baseClassName
   } = props;
   if (!isForm && !isEditTable) {
     const propValue = value || defaultValue;
@@ -16663,10 +16664,8 @@ var CharField = (props) => {
               disabled: readonly,
               placeholder,
               required: !invisible && required,
-              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
-                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary !w-fit max-w-[200px]"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+              className: `widget char-widget ${baseClassName}
+                 ${error2 && isEditTable && "widget-error"}
                 `
             }
           ),
@@ -16731,7 +16730,8 @@ var SecureField = (props) => {
     value,
     defaultValue,
     isForm,
-    isEditTable
+    isEditTable,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   const getPasswordMessage2 = (min4, max4, upcase2, digit2, special2) => {
@@ -16784,7 +16784,7 @@ var SecureField = (props) => {
         (0, import_react41.useEffect)(() => {
           if (value2) clearErrors(name2);
         }, [value2, clearErrors, name2]);
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `relative w-full ${className ?? ""}`, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `secure-widget relative w-full ${className ?? ""}`, children: [
           isCappedToken && shouldMask && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "div",
             {
@@ -16844,9 +16844,7 @@ var SecureField = (props) => {
               onCopy: (e3) => {
                 if (shouldMask) e3.preventDefault();
               },
-              className: `${!isCappedToken ? "w-full" : "w-[200px]"} h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary !w-fit max-w-[200px]"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}`
+              className: `${!isCappedToken ? "w-full" : "w-[200px]"} ${baseClassName} ${error2 && isEditTable && "widget-error"}`
             }
           ),
           canToggle && !isCappedToken && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
@@ -16902,7 +16900,7 @@ var CheckboxField = (props) => {
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "div",
         {
-          className: "flex items-center gap-2",
+          className: "widget checkbox-widget flex items-center gap-2",
           onClick: () => {
             const checked = !field.value;
             if (!isEditTable && readonly) return;
@@ -17061,7 +17059,8 @@ var CopyLinkButtonField = (props) => {
     isCopied,
     handleCopyToClipboard,
     propValue,
-    maskingValue
+    maskingValue,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm) {
@@ -17085,15 +17084,12 @@ var CopyLinkButtonField = (props) => {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "relative", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "widget copy-link-widget relative", children: [
           /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
             "div",
             {
               "aria-disabled": readonly,
-              className: `flex relative w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-1 opacity-100 leading-[1.5] resize-none overflow-hidden
-                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}`,
+              className: `${baseClassName} ${error2 && isEditTable && "widget-error"}`,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                   "input",
@@ -30927,7 +30923,8 @@ var DateField = (props) => {
     customValidateMinMax,
     minNowValue,
     maxNowValue,
-    context
+    context,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   const InputDateCustom = (0, import_react56.forwardRef)(
@@ -30978,6 +30975,7 @@ var DateField = (props) => {
             /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
               DatePicker,
               {
+                className: "widget date-widget",
                 selected: selectedDate,
                 onChange: (date) => {
                   if (date) {
@@ -31028,7 +31026,7 @@ var DateField = (props) => {
                   {
                     isForm,
                     defaultValue: field.value,
-                    className: `${invisible ? "hidden" : ""} ${isEditTable ? `pl-2 border-b-primary py-[12px] px-3 ${readonly && "cursor-not-allowed"}` : !isForm ? "!bg-transparent focus-within:!border-none" : `w-full h-full ring-0 focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-[#16a730] outline-0 bg-white border border-[rgba(66,66,66,0.12)] rounded-[10px] px-3 py-[12px] text-sm text-[#525866] font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden ${readonly && "cursor-not-allowed"}`}`
+                    className: `${baseClassName}`
                   }
                 ),
                 timeInputLabel: textPlaceHolder,
@@ -31143,7 +31141,7 @@ var DownLoadBinaryField = (props) => {
     {
       type: "button",
       onClick: handleFileDownload,
-      className: "download-binary-field flex items-center gap-1 text-blue-700 my-auto",
+      className: "widget download-binary-field flex items-center gap-1 text-blue-700 my-auto",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(DownloadIcon, {}),
         /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-sm italic underline text-primary", children: t3("download_file") })
@@ -31165,7 +31163,7 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "widget download-file-widget", children: [
     /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
       "label",
       {
@@ -31479,7 +31477,8 @@ var FloatField = (props) => {
     string,
     defaultValue,
     isEditTable,
-    onChange: handleOnchange
+    onChange: handleOnchange,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
@@ -31592,10 +31591,8 @@ var FloatField = (props) => {
               placeholder,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
-                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747] hover:border-b-[1px] hover:border-[#de4747]"}
+              className: `widget float-widget ${baseClassName}
+                 ${error2 && isEditTable && "widget-error"}
                 `
             }
           ),
@@ -31805,7 +31802,7 @@ var InfomationField = (props) => {
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, {});
   }
   const inforValues = Array.isArray(value) ? value : [value];
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "infor-widget group relative flex items-center gap-1 rounded-lg transition-shadow duration-300", children: inforValues.length > 1 ? inforValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     AvatarField,
     {
       id: item.id,
@@ -31987,18 +31984,20 @@ var Many2ManyTagField = (props) => {
               onMenuOpen: fetchMoreOptions,
               menuPlacement: "auto",
               placeholder: readonly ? "" : t3("choose_place"),
-              classNames: isEditTable ? {
+              classNames: `
+                ${isEditTable ? {
                 valueContainer: () => "overflow-unset !px-0",
-                control: () => `w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
+                control: () => `widget many2many-tags-widget w-full flex ring-0 cursor-pointer outline-0 md:!min-w-max max-w-max !shadow-none pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? `!cursor-not-allowed ${filteredValue?.length === 0 && "no-values"}` : ""}`,
                 dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
                 clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
               } : {
                 valueContainer: () => "overflow-unset !m-0 !p-0",
-                control: ({ isFocused }) => `w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
+                control: ({ isFocused }) => `widget many2many-tags-widget w-full h-full flex ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-lg p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "border-[1px] border-primary ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} ${readonly && "!cursor-not-allowed"} ${filteredValue?.length === 0 && "no-values"}`,
                 singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
                 input: () => "!m-0 !p-0",
                 dropdownIndicator: () => "!m-0 !p-0"
-              },
+              }}
+              `,
               styles: {
                 control: () => ({
                   maxWidth: isEditTable ? "max-content" : "100%",
@@ -32096,7 +32095,8 @@ var MonetaryField = (props) => {
     widget,
     placeholder,
     isEditTable,
-    symbol = "VND"
+    symbol = "VND",
+    baseClassName
   } = props;
   if (isForm && name2 === "amount_residual") {
     return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
@@ -32163,10 +32163,8 @@ var MonetaryField = (props) => {
               placeholder: placeholder ?? `${t3("choose_place")} ${string}`,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
-                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+              className: `widget monetary-widget ${baseClassName}
+                 ${error2 && isEditTable && "widget-error"}
                 `
             }
           ),
@@ -32334,7 +32332,7 @@ var RadioGroupField = (props) => {
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-1", children: [
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "widget radio-group-widget flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "input",
           {
@@ -32373,7 +32371,7 @@ var RemainingDaysField = (props) => {
   if (!value) return null;
   const adjustedValue = (0, import_moment3.default)(value).add(7, "hours");
   const isFuture = adjustedValue.isAfter((0, import_moment3.default)());
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: isForm ? "mb-4" : "", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: `widget remaining-days-widget ${isForm ? "mb-4" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(M, { id: `remainingDays_${value}`, place: "top", content: string }),
     /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       "div",
@@ -32408,7 +32406,8 @@ var SelectDropdownField = (props) => {
     isForm,
     onChange: onChange2,
     string,
-    isEditTable
+    isEditTable,
+    baseClassName
   } = props;
   const options2 = selection ? selection.map((val) => ({
     value: val[0],
@@ -32450,7 +32449,7 @@ var SelectDropdownField = (props) => {
               {
                 ...commonProps,
                 classNames: {
-                  control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused && !isEditTable ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                  control: ({ isFocused }) => `widget select-dropdown-widget ${baseClassName}  ${isForm && (isFocused ? "focused" : "")}`,
                   valueContainer: () => "!m-0 !p-0 ",
                   singleValue: () => `!m-0`,
                   input: () => "!m-0 !p-0",
@@ -32528,7 +32527,8 @@ var TextAreaField = (props) => {
     isForm,
     value,
     defaultValue,
-    onChange: onChange2
+    onChange: onChange2,
+    baseClassName
   } = props;
   const formProps = methods ? methods.register(name2, {
     onBlur: (e3) => {
@@ -32547,7 +32547,7 @@ var TextAreaField = (props) => {
     {
       ...formProps,
       defaultValue: value || defaultValue,
-      className: `textarea-field h-fit w-full cursor-pointer rounded-lg focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#fff] p-2 ${isForm ? "field" : ""}`,
+      className: `widget textarea-widget ${baseClassName}`,
       readOnly: readonly,
       disabled: readonly,
       placeholder,
@@ -32573,7 +32573,7 @@ var ToggleButtonField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
+      render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "widget toggle-widget inline-flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("label", { className: "relative inline-block w-8 h-5 cursor-pointer", children: [
         /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "input",
           {
@@ -32642,7 +32642,8 @@ var IntegerField = (props) => {
     defaultValue,
     onChange: onChange2,
     string,
-    isEditTable
+    isEditTable,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
@@ -32756,10 +32757,8 @@ var IntegerField = (props) => {
               placeholder,
               required: !invisible && required,
               style: invisible ? { display: "none" } : {},
-              className: `w-full h-full ring-0 focus:ring-0 focus:!outline-none outline-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden
-                 ${readonly ? "cursor-not-allowed border border-[rgba(66,66,66,0.12)] text-[#5c5a5a]" : "cursor-pointer border border-[rgba(66,66,66,0.12)] text-[#525866]"}
-                  ${!isEditTable ? isForm ? "bg-white border-input-primary rounded-[10px]" : "" : `border-transparent bg-transparent ${readonly ? "" : "border-b-primary"}`}
-                 ${error2 && isEditTable && "focus:border-b-[1px] focus:border-[#de4747]  hover:border-b-[1px] hover:border-[#de4747]"}
+              className: `widget integer-widget ${baseClassName}
+                 ${error2 && isEditTable && "widget-error"}
                 `
             }
           ),
@@ -33154,7 +33153,8 @@ var Many2OneField = (props) => {
     domainObject,
     setIsShowModalMany2Many,
     setInputValue,
-    setDomainObject
+    setDomainObject,
+    baseClassName
   } = props;
   const { t: t3 } = useI18n();
   if (!isForm && !isEditTable) {
@@ -33222,7 +33222,7 @@ var Many2OneField = (props) => {
                     menuShouldScrollIntoView: false,
                     options: listOptions,
                     classNames: {
-                      control: ({ isFocused }) => `w-full flex h-full ring-0 cursor-pointer outline-0 bg-white shadow-none rounded-[10px] py-2 px-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content  ${isForm && (isFocused ? "border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]")} ${readonly && "!cursor-not-allowed"} ${isEditTable && "md:!min-w-max max-w-max rounded-none border border-transparent border-b border-b-primary bg-transparent min-h-auto"}`,
+                      control: ({ isFocused }) => `widget many2one-widget ${baseClassName} ${isForm && (isFocused ? "focused" : "")}`,
                       valueContainer: () => "!m-0 !p-0 ",
                       singleValue: () => `!m-0`,
                       input: () => "!m-0 !p-0",
@@ -33566,7 +33566,7 @@ var DateOptionField = (props) => {
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
         "label",
         {
-          className: `cursor-pointer mr-2 w-[50px] flex items-center justify-center p-[4px] border rounded-md text-sm
+          className: `widget date-option-widget cursor-pointer mr-2 w-[50px] flex items-center justify-center p-[4px] border rounded-md text-sm
                   ${field.value ? "bg-primary text-white border-primary" : "bg-white text-black border-[#f7f7f7]"}
                   ${readonly ? "opacity-50 pointer-events-none" : ""}`,
           children: [