sag_components 2.0.0-beta230 → 2.0.0-beta232

package/dist/index.esm.js

@@ -575,6 +575,24 @@ const PackageSendIcon = () => /*#__PURE__*/React$1.createElement("svg", {
   fill: "#B1B1B1"
 }));
 
+const MenuItemOpenIcon = _ref => {
+  let {
+    width = '16',
+    height = '16',
+    color = '#7E7E7E'
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("path", {
+    d: "M7.40234 8.84766L0.652344 2.09766C0.300781 1.78125 0.300781 1.25391 0.652344 0.902344C0.96875 0.585938 1.49609 0.585938 1.84766 0.902344L8 7.08984L14.1523 0.9375C14.4688 0.585938 14.9961 0.585938 15.3477 0.9375C15.6641 1.25391 15.6641 1.78125 15.3477 2.09766L8.5625 8.84766C8.24609 9.19922 7.71875 9.19922 7.40234 8.84766Z",
+    fill: color
+  }));
+};
+
 const ChervronRightIcon = _ref => {
   let {
     width = "8",
@@ -3181,24 +3199,6 @@ const IconWrapper$4 = styled.div`
   align-content: center;  
 `;
 
-const MenuItemOpenIcon = _ref => {
-  let {
-    width = '16',
-    height = '16',
-    color = '#7E7E7E'
-  } = _ref;
-  return /*#__PURE__*/React$1.createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: "0 0 16 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React$1.createElement("path", {
-    d: "M7.40234 8.84766L0.652344 2.09766C0.300781 1.78125 0.300781 1.25391 0.652344 0.902344C0.96875 0.585938 1.49609 0.585938 1.84766 0.902344L8 7.08984L14.1523 0.9375C14.4688 0.585938 14.9961 0.585938 15.3477 0.9375C15.6641 1.25391 15.6641 1.78125 15.3477 2.09766L8.5625 8.84766C8.24609 9.19922 7.71875 9.19922 7.40234 8.84766Z",
-    fill: color
-  }));
-};
-
 const MenuItemRightIcon = _ref => {
   let {
     clicked,
@@ -35635,6 +35635,18 @@ const getIcon = (icon, iconHeight, iconWidth, color, disabled, pointer, callBack
         color: newColor,
         onClick: callBackOnClick
       }));
+    case 'openicon':
+      return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        className: "MenuItemOpenIcon",
+        pointer: pointer,
+        disabled: disabled,
+        onClick: callBackOnClick
+      }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
+        height: newIconHeight,
+        width: newIconWidth,
+        color: newColor,
+        onClick: callBackOnClick
+      }));
     default:
       return '';
   }
@@ -35826,6 +35838,7 @@ const Input$2 = _ref => {
     size,
     selectedValue,
     placeHolder,
+    inputType = "text",
     onChange,
     onClick,
     onBlur,
@@ -35991,7 +36004,7 @@ const Input$2 = _ref => {
   }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
     className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
-    type: password && !showPassword ? "password" : "text",
+    type: password && !showPassword ? "password" : inputType,
     value: inputValue,
     onChange: handleInputChange,
     onClick: handleLabelClick,
@@ -39299,6 +39312,25 @@ const StatusCellCircle = styled.div`
     border: 1px solid white;
     background-color: ${props => props.backgroundColor};
 `;
+const DotIndicatorWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  ${tooltipStyles$1}
+  
+  /* Override tooltip position */
+  &[data-tooltip]:hover::before {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + 20px);
+  }
+
+  &[data-tooltip]:hover::after {
+    top: calc(var(--tooltip-top, 0px) - var(--tooltip-offset, 60px) + var(--tooltip-height, 50px) + 20px);
+  }
+`;
 
 // NEW TAG STYLES
 const TagContainer = styled.div`
@@ -40530,14 +40562,40 @@ const TableBody = /*#__PURE__*/forwardRef(({
             if (!value || typeof value !== 'object') return null;
             const {
               show,
-              color
+              color,
+              tooltip
             } = value;
 
             // Only show the dot if show is true
             if (!show) return null;
-            return /*#__PURE__*/React$1.createElement(StatusCellCircle, {
+            return /*#__PURE__*/React$1.createElement(DotIndicatorWrapper, {
+              ref: el => {
+                if (el && tooltip && tooltip.trim() !== "") {
+                  try {
+                    const rect = el.getBoundingClientRect();
+                    if (rect.width > 0 && rect.height > 0) {
+                      const tooltipInfo = calculateTooltipOffset(tooltip);
+                      if (tooltipInfo) {
+                        const {
+                          offset,
+                          height
+                        } = tooltipInfo;
+                        el.style.setProperty("--tooltip-top", `${rect.top}px`);
+                        el.style.setProperty("--tooltip-left", `${rect.left}px`);
+                        el.style.setProperty("--tooltip-width", `${rect.width}px`);
+                        el.style.setProperty("--tooltip-offset", `${offset}px`);
+                        el.style.setProperty("--tooltip-height", `${height}px`);
+                        el.setAttribute("data-tooltip", tooltip);
+                      }
+                    }
+                  } catch (e) {
+                    console.warn("Error applying dotIndicator tooltip:", e);
+                  }
+                }
+              }
+            }, /*#__PURE__*/React$1.createElement(StatusCellCircle, {
               backgroundColor: color
-            });
+            }));
           } catch (e) {
             console.warn('Error formatting dotIndicator:', e);
             return null;
@@ -40549,7 +40607,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
               style: {
                 color: isDefine ? "#8B8989" : "inherit"
               }
-            }, value ?? "Define"), /*#__PURE__*/React$1.createElement(PencilButton, {
+            }, value ? `$${value}` : "Define"), /*#__PURE__*/React$1.createElement(PencilButton, {
               onClick: e => {
                 e.stopPropagation();
                 handleEditableClick(row, column.key, value, rowIndex);
@@ -40823,6 +40881,9 @@ const TableBody = /*#__PURE__*/forwardRef(({
         case "checkbox":
           try {
             const isChecked = Boolean(value);
+            // Check if this specific checkbox should be disabled
+            // Format: checkboxDisabled_{columnKey} or checkboxDisabled (for backward compatibility)
+            const isDisabled = row[`checkboxDisabled_${column.key}`] === true || column.key && row[`checkboxDisabled_${column.key}`] === true;
             return /*#__PURE__*/React$1.createElement("div", {
               style: {
                 display: "flex",
@@ -40834,13 +40895,15 @@ const TableBody = /*#__PURE__*/forwardRef(({
             }, /*#__PURE__*/React$1.createElement("input", {
               type: "checkbox",
               checked: isChecked,
+              disabled: isDisabled,
               onChange: e => handleCheckboxClick(row, column.key, e),
               onClick: e => e.stopPropagation(),
               style: {
                 width: "18px",
                 height: "18px",
-                cursor: "pointer",
-                accentColor: buttonColor
+                cursor: isDisabled ? "not-allowed" : "pointer",
+                accentColor: buttonColor,
+                opacity: isDisabled ? 0.5 : 1
               }
             }));
           } catch (e) {
@@ -44432,6 +44495,7 @@ const Table = props => {
     noEventsSubtitle = "Let's get started and create your first one!",
     noEventsButtonText = "New Event",
     noEventsButtonIcon = "Plus",
+    disableNoEventsButton = false,
     showNoEventsButton = true,
     indexToShimmer = -1,
     resetFocusIndex,
@@ -44615,6 +44679,7 @@ const Table = props => {
     height: "45px",
     leftIcon: noEventsButtonIcon,
     text: noEventsButtonText,
+    disabled: disableNoEventsButton,
     borderRadius: "12px",
     borderColor: buttonColor,
     hoverBorderColor: buttonHoverColor,
@@ -44658,7 +44723,7 @@ const TitleContainer = styled$1.div`
 `;
 const SectionTitle$1 = styled$1.div`
   color: #212121;
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 700;
 `;
 const SubtitleContainer = styled$1.div`
@@ -44717,7 +44782,7 @@ const VendorList$2 = styled$1.div`
 `;
 const VendorItem$1 = styled$1.div`
   display: grid;
-  grid-template-columns: 15% 70% 15%;  
+  grid-template-columns: 10% 75% 15%;  
   align-items: center;
   padding: 16px 8px;
   border-bottom: 1px solid #f2f2f2;
@@ -44736,7 +44801,7 @@ const VendorItem$1 = styled$1.div`
 `;
 const VendorName$2 = styled$1.div`
   color: #212121;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   max-width: 90%;
@@ -54430,7 +54495,8 @@ const ItemManagerPanel = _ref => {
     buttonTooltipText = "Please fill out all forms before sending.",
     trashTooltipText = 'Vendor cannot be deleted since its  packages <br/> have already been sent as a form.',
     maxVisibleVendors = 12,
-    componentText = "Scale"
+    componentText = "Scale",
+    SubTitleColor = "#8B8989"
   } = _ref;
   const [screen, setScreen] = useState("initial");
   const [selectedVendor, setSelectedVendor] = useState(null);
@@ -54681,7 +54747,9 @@ const ItemManagerPanel = _ref => {
         }
       }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, {
         title: item.name
-      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
+      }, item.name), packagesLength === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), packagesLength > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, {
+        color: SubTitleColor
+      }, (() => {
         const noPackagesSent = sentPackagesLength === 0;
         if (noPackagesSent) {
           return `0/${packagesLength} Packages Sent`;
@@ -54941,6 +55009,79 @@ const Label$1 = styled.label`
   }
 `;
 
+const PenIcon = _ref => {
+  let {
+    width = "24",
+    height = "24",
+    color = "#212121"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("g", {
+    filter: "url(#filter0_d_2525_123082)"
+  }, /*#__PURE__*/React$1.createElement("mask", {
+    id: "path-1-outside-1_2525_123082",
+    maskUnits: "userSpaceOnUse",
+    x: "3.73438",
+    y: "3.375",
+    width: "17",
+    height: "19",
+    fill: color
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    fill: "white",
+    x: "3.73438",
+    y: "3.375",
+    width: "17",
+    height: "19"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M15.1572 5.32807C16.031 4.33374 17.3136 4.07387 18.0234 4.7558L19.3105 5.99116C19.6459 6.4461 19.802 7.00854 19.749 7.57123C19.696 8.13395 19.4378 8.65758 19.0234 9.04194L9.57031 19.9384C9.34115 20.2236 9.05407 20.4571 8.72754 20.622C8.40112 20.7869 8.04311 20.8802 7.67773 20.8955L4.73438 21.1464L4.95605 18.0234C4.95807 17.9606 4.96275 17.8968 4.96973 17.833L4.9873 17.5898L5.00488 17.6103C5.11537 17.0963 5.35621 16.6187 5.7041 16.2246L15.1572 5.32807ZM6.9043 17.2705C6.73634 17.4579 6.61798 17.6844 6.56152 17.9296L6.55273 17.9746L6.5459 18.0126C6.54191 18.0332 6.53798 18.0541 6.54199 18.0751L6.53809 18.1386L6.44727 19.4121L7.61328 19.3095L7.69434 19.3115C7.96355 19.2647 8.20438 19.1159 8.36719 18.8964L15.6064 10.5517L13.9961 9.09369L6.9043 17.2705ZM16.9922 5.96088C16.7403 6.02342 16.5162 6.16848 16.3564 6.37299L15.0342 7.89741L16.6436 9.35541L17.8203 7.99994C17.9368 7.88082 18.0279 7.73901 18.0889 7.58393C18.1498 7.42886 18.179 7.26318 18.1748 7.09662L16.9922 5.96088Z"
+  })), /*#__PURE__*/React$1.createElement("path", {
+    d: "M15.1572 5.32807C16.031 4.33374 17.3136 4.07387 18.0234 4.7558L19.3105 5.99116C19.6459 6.4461 19.802 7.00854 19.749 7.57123C19.696 8.13395 19.4378 8.65758 19.0234 9.04194L9.57031 19.9384C9.34115 20.2236 9.05407 20.4571 8.72754 20.622C8.40112 20.7869 8.04311 20.8802 7.67773 20.8955L4.73438 21.1464L4.95605 18.0234C4.95807 17.9606 4.96275 17.8968 4.96973 17.833L4.9873 17.5898L5.00488 17.6103C5.11537 17.0963 5.35621 16.6187 5.7041 16.2246L15.1572 5.32807ZM6.9043 17.2705C6.73634 17.4579 6.61798 17.6844 6.56152 17.9296L6.55273 17.9746L6.5459 18.0126C6.54191 18.0332 6.53798 18.0541 6.54199 18.0751L6.53809 18.1386L6.44727 19.4121L7.61328 19.3095L7.69434 19.3115C7.96355 19.2647 8.20438 19.1159 8.36719 18.8964L15.6064 10.5517L13.9961 9.09369L6.9043 17.2705ZM16.9922 5.96088C16.7403 6.02342 16.5162 6.16848 16.3564 6.37299L15.0342 7.89741L16.6436 9.35541L17.8203 7.99994C17.9368 7.88082 18.0279 7.73901 18.0889 7.58393C18.1498 7.42886 18.179 7.26318 18.1748 7.09662L16.9922 5.96088Z",
+    fill: color
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M15.1572 5.32807L14.7816 4.998L14.7795 5.00042L15.1572 5.32807ZM18.0234 4.7558L17.677 5.11638L17.6772 5.11654L18.0234 4.7558ZM19.3105 5.99116L19.713 5.69448L19.6876 5.66005L19.6568 5.63042L19.3105 5.99116ZM19.749 7.57123L20.2468 7.61814L20.2468 7.61806L19.749 7.57123ZM19.0234 9.04194L18.6834 8.67535L18.6635 8.69379L18.6458 8.71428L19.0234 9.04194ZM9.57031 19.9384L9.19263 19.6108L9.18647 19.6179L9.18058 19.6252L9.57031 19.9384ZM8.72754 20.622L8.95297 21.0683L8.95297 21.0683L8.72754 20.622ZM7.67773 20.8955L7.65684 20.3959L7.64603 20.3963L7.63525 20.3973L7.67773 20.8955ZM4.73438 21.1464L4.23563 21.111L4.19423 21.6943L4.77686 21.6446L4.73438 21.1464ZM4.95605 18.0234L5.4548 18.0588L5.45549 18.0491L5.4558 18.0394L4.95605 18.0234ZM4.96973 17.833L5.46677 17.8873L5.46776 17.8782L5.46843 17.869L4.96973 17.833ZM4.9873 17.5898L5.36693 17.2644L4.57621 16.3419L4.48861 17.5537L4.9873 17.5898ZM5.00488 17.6103L4.62525 17.9357L5.28172 18.7016L5.49372 17.7154L5.00488 17.6103ZM5.7041 16.2246L6.07897 16.5554L6.08178 16.5522L5.7041 16.2246ZM6.9043 17.2705L7.27672 17.6042L7.28202 17.5981L6.9043 17.2705ZM6.56152 17.9296L6.07427 17.8175L6.07241 17.8255L6.07083 17.8336L6.56152 17.9296ZM6.55273 17.9746L6.06198 17.8785L6.0606 17.8862L6.55273 17.9746ZM6.5459 18.0126L7.03676 18.1081L7.03803 18.101L6.5459 18.0126ZM6.54199 18.0751L7.04105 18.1059L7.04491 18.0431L7.03313 17.9814L6.54199 18.0751ZM6.53809 18.1386L7.03684 18.1742L7.03714 18.1693L6.53809 18.1386ZM6.44727 19.4121L5.94853 19.3765L5.90681 19.9615L6.49107 19.9101L6.44727 19.4121ZM7.61328 19.3095L7.62533 18.8097L7.59735 18.809L7.56948 18.8114L7.61328 19.3095ZM7.69434 19.3115L7.68229 19.8113L7.73148 19.8125L7.77995 19.8041L7.69434 19.3115ZM8.36719 18.8964L7.9895 18.5688L7.977 18.5832L7.96563 18.5985L8.36719 18.8964ZM15.6064 10.5517L15.9841 10.8794L16.3049 10.5096L15.942 10.1811L15.6064 10.5517ZM13.9961 9.09369L14.3317 8.72304L13.953 8.38022L13.6184 8.76609L13.9961 9.09369ZM16.9922 5.96088L17.3385 5.60025L17.1395 5.40912L16.8717 5.47562L16.9922 5.96088ZM16.3564 6.37299L16.7342 6.70061L16.7426 6.69089L16.7505 6.68075L16.3564 6.37299ZM15.0342 7.89741L14.6565 7.56978L14.3358 7.93943L14.6985 8.26796L15.0342 7.89741ZM16.6436 9.35541L16.3079 9.72596L16.6863 10.0688L17.0211 9.6832L16.6436 9.35541ZM17.8203 7.99994L17.4628 7.65034L17.4525 7.66095L17.4427 7.67216L17.8203 7.99994ZM18.0889 7.58393L18.5542 7.7668L18.5542 7.76677L18.0889 7.58393ZM18.1748 7.09662L18.6746 7.08391L18.6694 6.87839L18.5211 6.736L18.1748 7.09662ZM15.1572 5.32807L15.5328 5.65813C15.9066 5.23273 16.3521 4.98342 16.7501 4.90358C17.1457 4.82425 17.4653 4.91295 17.677 5.11638L18.0234 4.7558L18.3698 4.39523C17.8717 3.91673 17.1952 3.7944 16.5535 3.9231C15.9144 4.05129 15.2816 4.42908 14.7816 4.99801L15.1572 5.32807ZM18.0234 4.7558L17.6772 5.11654L18.9643 6.35189L19.3105 5.99116L19.6568 5.63042L18.3697 4.39507L18.0234 4.7558ZM19.3105 5.99116L18.9081 6.28783C19.1705 6.64386 19.2927 7.08401 19.2512 7.5244L19.749 7.57123L20.2468 7.61806C20.3113 6.93306 20.1213 6.24834 19.713 5.69448L19.3105 5.99116ZM19.749 7.57123L19.2512 7.52433C19.2097 7.96486 19.0076 8.37465 18.6834 8.67535L19.0234 9.04194L19.3635 9.40852C19.868 8.94051 20.1823 8.30303 20.2468 7.61814L19.749 7.57123ZM19.0234 9.04194L18.6458 8.71428L9.19263 19.6108L9.57031 19.9384L9.94799 20.2661L19.4011 9.36959L19.0234 9.04194ZM9.57031 19.9384L9.18058 19.6252C8.99561 19.8553 8.76436 20.0432 8.5021 20.1757L8.72754 20.622L8.95297 21.0683C9.34377 20.8709 9.68668 20.5918 9.96005 20.2516L9.57031 19.9384ZM8.72754 20.622L8.50211 20.1757C8.23926 20.3085 7.95099 20.3836 7.65684 20.3959L7.67773 20.8955L7.69863 21.395C8.13524 21.3768 8.56298 21.2653 8.95297 21.0683L8.72754 20.622ZM7.67773 20.8955L7.63525 20.3973L4.69189 20.6482L4.73438 21.1464L4.77686 21.6446L7.72021 21.3936L7.67773 20.8955ZM4.73438 21.1464L5.23312 21.1818L5.4548 18.0588L4.95605 18.0234L4.45731 17.988L4.23563 21.111L4.73438 21.1464ZM4.95605 18.0234L5.4558 18.0394C5.45737 17.9905 5.46106 17.9395 5.46677 17.8873L4.96973 17.833L4.47269 17.7786C4.46444 17.8541 4.45877 17.9307 4.45631 18.0073L4.95605 18.0234ZM4.96973 17.833L5.46843 17.869L5.486 17.6258L4.9873 17.5898L4.48861 17.5537L4.47103 17.7969L4.96973 17.833ZM4.9873 17.5898L4.60768 17.9152L4.62525 17.9357L5.00488 17.6103L5.38451 17.2849L5.36693 17.2644L4.9873 17.5898ZM5.00488 17.6103L5.49372 17.7154C5.58622 17.2851 5.78788 16.8852 6.07896 16.5554L5.7041 16.2246L5.32924 15.8937C4.92453 16.3522 4.64451 16.9076 4.51605 17.5052L5.00488 17.6103ZM5.7041 16.2246L6.08178 16.5522L15.5349 5.65572L15.1572 5.32807L14.7795 5.00042L5.32642 15.8969L5.7041 16.2246ZM6.9043 17.2705L6.53192 16.9368C6.3083 17.1863 6.14993 17.4888 6.07427 17.8175L6.56152 17.9296L7.04878 18.0418C7.08604 17.88 7.16438 17.7294 7.27667 17.6041L6.9043 17.2705ZM6.56152 17.9296L6.07083 17.8336L6.06204 17.8785L6.55273 17.9746L7.04343 18.0706L7.05222 18.0256L6.56152 17.9296ZM6.55273 17.9746L6.0606 17.8862L6.05376 17.9243L6.5459 18.0126L7.03803 18.101L7.04487 18.0629L6.55273 17.9746ZM6.5459 18.0126L6.05508 17.9172C6.0537 17.9243 6.02602 18.0387 6.05085 18.1688L6.54199 18.0751L7.03313 17.9814C7.04251 18.0306 7.04069 18.0698 7.03875 18.0905C7.03709 18.1081 7.03421 18.1209 7.03671 18.108L6.5459 18.0126ZM6.54199 18.0751L6.04294 18.0444L6.03903 18.1079L6.53809 18.1386L7.03714 18.1693L7.04105 18.1059L6.54199 18.0751ZM6.53809 18.1386L6.03935 18.103L5.94853 19.3765L6.44727 19.4121L6.946 19.4476L7.03682 18.1742L6.53809 18.1386ZM6.44727 19.4121L6.49107 19.9101L7.65708 19.8076L7.61328 19.3095L7.56948 18.8114L6.40346 18.914L6.44727 19.4121ZM7.61328 19.3095L7.60124 19.8094L7.68229 19.8113L7.69434 19.3115L7.70638 18.8116L7.62533 18.8097L7.61328 19.3095ZM7.69434 19.3115L7.77995 19.8041C8.17599 19.7353 8.52976 19.5165 8.76874 19.1943L8.36719 18.8964L7.96563 18.5985C7.879 18.7153 7.7511 18.7941 7.60872 18.8189L7.69434 19.3115ZM8.36719 18.8964L8.74487 19.2241L15.9841 10.8794L15.6064 10.5517L15.2288 10.2241L7.9895 18.5688L8.36719 18.8964ZM15.6064 10.5517L15.942 10.1811L14.3317 8.72304L13.9961 9.09369L13.6605 9.46435L15.2709 10.9224L15.6064 10.5517ZM13.9961 9.09369L13.6184 8.76609L6.52657 16.9428L6.9043 17.2705L7.28202 17.5981L14.3738 9.4213L13.9961 9.09369ZM16.9922 5.96088L16.8717 5.47562C16.5118 5.56498 16.1912 5.77228 15.9624 6.06523L16.3564 6.37299L16.7505 6.68075C16.8412 6.56468 16.9689 6.48186 17.1127 6.44615L16.9922 5.96088ZM16.3564 6.37299L15.9787 6.04537L14.6565 7.56978L15.0342 7.89741L15.4119 8.22503L16.7342 6.70061L16.3564 6.37299ZM15.0342 7.89741L14.6985 8.26796L16.3079 9.72596L16.6436 9.35541L16.9793 8.98486L15.3699 7.52686L15.0342 7.89741ZM16.6436 9.35541L17.0211 9.6832L18.1979 8.32773L17.8203 7.99994L17.4427 7.67216L16.266 9.02763L16.6436 9.35541ZM17.8203 7.99994L18.1778 8.34954C18.3418 8.18181 18.4692 7.98306 18.5542 7.7668L18.0889 7.58393L17.6235 7.40106C17.5866 7.49497 17.5318 7.57983 17.4628 7.65034L17.8203 7.99994ZM18.0889 7.58393L18.5542 7.76677C18.6396 7.54957 18.6806 7.31739 18.6746 7.08391L18.1748 7.09662L17.675 7.10934C17.6775 7.20896 17.66 7.30816 17.6235 7.40109L18.0889 7.58393ZM18.1748 7.09662L18.5211 6.736L17.3385 5.60025L16.9922 5.96088L16.6459 6.32151L17.8285 7.45725L18.1748 7.09662Z",
+    fill: "white",
+    mask: "url(#path-1-outside-1_2525_123082)"
+  })), /*#__PURE__*/React$1.createElement("defs", null, /*#__PURE__*/React$1.createElement("filter", {
+    id: "filter0_d_2525_123082",
+    x: "-15.8047",
+    y: "-16.125",
+    width: "56.0625",
+    height: "57.8203",
+    filterUnits: "userSpaceOnUse",
+    "color-interpolation-filters": "sRGB"
+  }, /*#__PURE__*/React$1.createElement("feFlood", {
+    "flood-opacity": "0",
+    result: "BackgroundImageFix"
+  }), /*#__PURE__*/React$1.createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /*#__PURE__*/React$1.createElement("feOffset", null), /*#__PURE__*/React$1.createElement("feGaussianBlur", {
+    stdDeviation: "10"
+  }), /*#__PURE__*/React$1.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__PURE__*/React$1.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+  }), /*#__PURE__*/React$1.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_2525_123082"
+  }), /*#__PURE__*/React$1.createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_2525_123082",
+    result: "shape"
+  }))));
+};
+
 const DialogOverlay = styled.div`
   position: fixed;
   font-family: "Poppins", sans-serif;
@@ -55160,25 +55301,26 @@ const OverlayDropdown = _ref => {
     disabled = false,
     isDarkerBackground = false,
     required = false,
-    selectedColor = '#066768',
-    hoverColor = '#E6F0F0',
-    dropdownMaxHeight = '600px',
-    width = '100%',
-    height = 'auto',
+    selectedColor = "#066768",
+    hoverColor = "#E6F0F0",
+    dropdownMaxHeight = "600px",
+    width = "100%",
+    height = "auto",
     label,
     labelEmptyValue,
     showLabelOnTop,
     placeHolder,
     labelColor,
     placeHolderColor,
-    margin = '8px',
+    margin = "8px",
+    editableDigitalCoupon = false,
     ...props
   } = _ref;
   const [open, setOpen] = useState(false);
   const [hoveredText, setHoveredText] = useState(null);
   const [templateDialog, setTemplateDialog] = useState(null);
-  const [dropdownPosition, setDropdownPosition] = useState('below');
-  const [lastDefinedGroup, setLastDefinedGroup] = useState(data.find(group => group.overlayCode === 'last_defined'));
+  const [dropdownPosition, setDropdownPosition] = useState("below");
+  const [lastDefinedGroup, setLastDefinedGroup] = useState(data.find(group => group.overlayCode === "last_defined"));
   const buttonRef = useRef(null);
   const dropdownRef = useRef(null);
   const containerRef = useRef(null);
@@ -55191,12 +55333,12 @@ const OverlayDropdown = _ref => {
       }
     };
     if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('touchstart', handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside);
     }
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
     };
   }, [open]);
 
@@ -55214,9 +55356,9 @@ const OverlayDropdown = _ref => {
 
       // If there's not enough space below, but more space above, position above
       if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-        setDropdownPosition('above');
+        setDropdownPosition("above");
       } else {
-        setDropdownPosition('below');
+        setDropdownPosition("below");
       }
     }
   }, [open, dropdownMaxHeight, margin]);
@@ -55246,8 +55388,8 @@ const OverlayDropdown = _ref => {
 
   // Tooltip logic for long string
   const getDisplayText = text => {
-    if (!text) return '';
-    if (text.length > 66) return text.slice(0, 66) + '...';
+    if (!text) return "";
+    if (text.length > 66) return text.slice(0, 66) + "...";
     return text;
   };
   const getTemplateParams = label => {
@@ -55262,12 +55404,12 @@ const OverlayDropdown = _ref => {
       return [{
         label: beforeX.trim(),
         // "Buy "
-        type: 'number',
-        suffix: ''
+        type: "number",
+        suffix: ""
       }, {
         label: betweenXY.trim(),
         // " & Get "
-        type: 'number',
+        type: "number",
         suffix: afterY.trim() // " % Off"
       }];
     }
@@ -55280,16 +55422,16 @@ const OverlayDropdown = _ref => {
       return [{
         label: beforeVar.trim(),
         // "Buy "
-        type: 'number',
+        type: "number",
         suffix: afterVar.trim() // " of item(s), Get Free Item"
       }];
     }
 
     // Fallback: if no pattern matches, treat as single input
     return [{
-      label: 'Value',
-      type: 'number',
-      suffix: ''
+      label: "Value",
+      type: "number",
+      suffix: ""
     }];
   };
   const generateFinalSentence = (template, values) => {
@@ -55340,8 +55482,8 @@ const OverlayDropdown = _ref => {
       } else {
         // Create new group
         setLastDefinedGroup({
-          overlayCode: 'last_defined',
-          overlayName: 'Last defined by you',
+          overlayCode: "last_defined",
+          overlayName: "Last defined by you",
           templateType: 1,
           items: [newItem]
         });
@@ -55402,7 +55544,7 @@ const OverlayDropdown = _ref => {
     onMouseEnter: () => setHoveredText(selected?.label),
     onMouseLeave: () => setHoveredText(null),
     color: !selected && open ? placeHolderColor : "inherit"
-  }, selected ? getDisplayText(selected.label) : open ? placeHolder : ''), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
+  }, selected ? getDisplayText(selected.label) : open ? placeHolder : ""), open ? /*#__PURE__*/React$1.createElement(MenuItemUpIcon, {
     width: "12px",
     height: "12px",
     color: "#B1B1B1"
@@ -55420,7 +55562,7 @@ const OverlayDropdown = _ref => {
     $showBorder: group.overlayName,
     margin: margin,
     key: group.overlayCode
-  }, ['Template Offer', 'Last defined by you'].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
+  }, ["Template Offer", "Last defined by you"].includes(group.overlayName) && /*#__PURE__*/React$1.createElement(SectionTitle, null, group.overlayName), group.items.map(item => /*#__PURE__*/React$1.createElement(DropdownItem, {
     key: item.value,
     selected: item.value === value,
     selectedColor: selectedColor,
@@ -55454,6 +55596,8 @@ const OverlayDropdown = _ref => {
     onMouseLeave: () => setHoveredText(null)
   }, getDisplayText(item.label)), group.templateType === 2 ? /*#__PURE__*/React$1.createElement(ChervronRightIcon, {
     fill: item.value === value ? "#fff" : "#212121"
+  }) : group.templateType === 3 && editableDigitalCoupon ? /*#__PURE__*/React$1.createElement(PenIcon, {
+    fill: item.value === value ? "#fff" : "#212121"
   }) : item.value === value && /*#__PURE__*/React$1.createElement(OkIcon, {
     width: "22px",
     height: "22px",