abdul-react 0.0.24 → 0.0.26

package/lib/index.cjs

@@ -218,7 +218,7 @@ const SvgExportCollectionIcon = (props) => /* @__PURE__ */ React__namespace.crea
 
 const SvgRunIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_5151_106068)" }, /* @__PURE__ */ React__namespace.createElement("g", { filter: "url(#filter0_d_5151_106068)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M24.8701 12C24.8701 18.6274 19.4975 24 12.8701 24C6.2427 24 0.870117 18.6274 0.870117 12C0.870117 5.37258 6.2427 0 12.8701 0C19.4975 0 24.8701 5.37258 24.8701 12Z", fill: "url(#paint0_linear_5151_106068)" })), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.2033 15.7503L16.2033 12.0003L11.2033 8.25032V15.7503ZM12.87 3.66699C11.2218 3.66699 9.61061 4.15573 8.24021 5.07141C6.8698 5.98709 5.80169 7.28858 5.17096 8.8113C4.54023 10.334 4.3752 12.0096 4.69675 13.6261C5.01829 15.2426 5.81196 16.7274 6.9774 17.8929C8.14284 19.0583 9.6277 19.852 11.2442 20.1735C12.8607 20.4951 14.5363 20.33 16.059 19.6993C17.5817 19.0686 18.8832 18.0005 19.7989 16.6301C20.7145 15.2597 21.2033 13.6485 21.2033 12.0003C21.2033 9.79019 20.3253 7.67057 18.7625 6.10777C17.1997 4.54497 15.0801 3.66699 12.87 3.66699ZM12.87 18.667C11.5514 18.667 10.2625 18.276 9.16616 17.5435C8.06983 16.8109 7.21535 15.7697 6.71076 14.5515C6.20618 13.3334 6.07415 11.9929 6.33139 10.6997C6.58862 9.40652 7.22356 8.21863 8.15591 7.28628C9.08826 6.35393 10.2761 5.71899 11.5694 5.46176C12.8626 5.20452 14.203 5.33654 15.4212 5.84113C16.6394 6.34571 17.6805 7.2002 18.4131 8.29652C19.1456 9.39285 19.5366 10.6818 19.5366 12.0003C19.5344 13.7678 18.8313 15.4622 17.5816 16.7119C16.3318 17.9617 14.6374 18.6648 12.87 18.667Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("filter", { id: "filter0_d_5151_106068", x: -0.129883, y: -3, width: 28, height: 28, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React__namespace.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ React__namespace.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__namespace.createElement("feOffset", { dx: 1, dy: -1 }), /* @__PURE__ */ React__namespace.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ React__namespace.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.141176 0 0 0 0 0.0745098 0 0 0 0 0.196078 0 0 0 0.1 0" }), /* @__PURE__ */ React__namespace.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_5151_106068" }), /* @__PURE__ */ React__namespace.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_5151_106068", result: "shape" })), /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint0_linear_5151_106068", x1: 2.59783, y1: 2.34599, x2: 24.8701, y2: 24, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#2A6F09" }), /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#44B002" })), /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_5151_106068" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 24, height: 24, fill: "currentColor", transform: "translate(0.870117)" }))));
 
-const SvgBeautifyIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 0.5, y: 0.5, width: 16, height: 16, rx: 4.5, stroke: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10 15.2402H3V14.2402H10V15.2402ZM10 13.2402H3V12.2402H10V13.2402ZM14.7998 11.04H4.56055V9.75977H14.7998V11.04ZM12.2402 8.48047H4.56055V7.2002H12.2402V8.48047ZM14.4082 8.48047H12.5605V7.2002H14.4082V8.48047ZM10 6H3V5H10V6ZM10 4H3V3H10V4Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2786 2.22236C13.249 2.0923 13.1334 2 13 2C12.8666 2 12.751 2.0923 12.7214 2.22236L12.5633 2.91756C12.4902 3.23911 12.2391 3.4902 11.9176 3.56331L11.2224 3.7214C11.0923 3.75097 11 3.86661 11 4C11 4.13339 11.0923 4.24903 11.2224 4.2786L11.9176 4.43669C12.2391 4.5098 12.4902 4.76089 12.5633 5.08244L12.7214 5.77764C12.751 5.9077 12.8666 6 13 6C13.1334 6 13.249 5.9077 13.2786 5.77764L13.4367 5.08244C13.5098 4.76089 13.7609 4.5098 14.0824 4.43669L14.7776 4.2786C14.9077 4.24903 15 4.13339 15 4C15 3.86661 14.9077 3.75097 14.7776 3.7214L14.0824 3.56331C13.7609 3.4902 13.5098 3.23911 13.4367 2.91756L13.2786 2.22236ZM12.3769 4C12.6449 3.86324 12.8632 3.64489 13 3.37691C13.1368 3.64489 13.3551 3.86324 13.6231 4C13.3551 4.13676 13.1368 4.35511 13 4.62309C12.8632 4.35511 12.6449 4.13676 12.3769 4Z", fill: "currentColor" }));
+const SvgBeautifyIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 0.5, y: 0.5, width: 17, height: 17, rx: 4.5, stroke: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10 15.2402H3V14.2402H10V15.2402ZM10 13.2402H3V12.2402H10V13.2402ZM14.7998 11.04H4.56055V9.75977H14.7998V11.04ZM12.2402 8.48047H4.56055V7.2002H12.2402V8.48047ZM14.4082 8.48047H12.5605V7.2002H14.4082V8.48047ZM10 6H3V5H10V6ZM10 4H3V3H10V4Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.2786 2.22236C13.249 2.0923 13.1334 2 13 2C12.8666 2 12.751 2.0923 12.7214 2.22236L12.5633 2.91756C12.4902 3.23911 12.2391 3.4902 11.9176 3.56331L11.2224 3.7214C11.0923 3.75097 11 3.86661 11 4C11 4.13339 11.0923 4.24903 11.2224 4.2786L11.9176 4.43669C12.2391 4.5098 12.4902 4.76089 12.5633 5.08244L12.7214 5.77764C12.751 5.9077 12.8666 6 13 6C13.1334 6 13.249 5.9077 13.2786 5.77764L13.4367 5.08244C13.5098 4.76089 13.7609 4.5098 14.0824 4.43669L14.7776 4.2786C14.9077 4.24903 15 4.13339 15 4C15 3.86661 14.9077 3.75097 14.7776 3.7214L14.0824 3.56331C13.7609 3.4902 13.5098 3.23911 13.4367 2.91756L13.2786 2.22236ZM12.3769 4C12.6449 3.86324 12.8632 3.64489 13 3.37691C13.1368 3.64489 13.3551 3.86324 13.6231 4C13.3551 4.13676 13.1368 4.35511 13 4.62309C12.8632 4.35511 12.6449 4.13676 12.3769 4Z", fill: "#71347B" }));
 
 const SvgAddVariableIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9799 1.39074L14.98 1.39066C14.7152 1.10024 14.2958 0.91202 13.667 0.901363L13.6603 0.901248L13.6603 0.901202C12.7479 0.873384 11.9951 1.10031 11.384 1.55729C10.8289 1.97239 10.3593 2.60115 10.001 3.47483C10.1534 3.44887 10.311 3.43399 10.4753 3.43399C10.7848 3.43399 11.4004 3.4707 11.7695 3.94829L11.7739 3.95398L11.7738 3.95401C12.0596 4.33506 12.0442 4.83443 11.9167 5.28791L11.9148 5.29459L11.9148 5.29458C11.8487 5.5177 11.679 5.86554 11.4767 6.23962C11.2662 6.62901 10.996 7.09066 10.702 7.55973L10.6993 7.56416L10.6992 7.56414C10.3347 8.13251 10.0495 8.55478 9.83621 8.83812C9.73082 8.9781 9.63297 9.09769 9.54476 9.18669C9.50132 9.23051 9.44774 9.27975 9.3864 9.32131C9.33933 9.3532 9.21625 9.43126 9.04751 9.43126H9.03969L9.03189 9.43102C8.86024 9.42565 8.74138 9.34197 8.68565 9.29502C8.62506 9.24396 8.58139 9.18766 8.55261 9.14632C8.49422 9.06244 8.44439 8.96269 8.40245 8.86844C8.31617 8.6746 8.22417 8.41394 8.13119 8.12159C7.94369 7.5321 7.73346 6.75358 7.53672 5.98052C7.33946 5.20536 7.15363 4.42727 7.01499 3.8353C6.94564 3.53916 6.88802 3.28929 6.84663 3.10947L6.79742 2.89575C6.78998 2.86356 6.7853 2.8436 6.78273 2.83267C6.78085 2.82467 6.78011 2.82151 6.78026 2.82195C6.57968 2.09733 6.4571 1.68312 6.26635 1.42424C6.18505 1.31391 6.0959 1.24128 5.9786 1.19094C5.85381 1.13739 5.67159 1.09837 5.39186 1.09837C5.26627 1.09837 5.03076 1.1623 4.67253 1.3451C4.32974 1.52003 3.92898 1.77495 3.49123 2.08709C2.6167 2.71068 1.63791 3.53124 0.748646 4.31012L0.746028 4.31241L0.74602 4.3124L0.529348 4.49953L0.770345 4.803C1.04584 4.59868 1.33341 4.39361 1.60844 4.23668C1.8837 4.07963 2.21683 3.9283 2.55433 3.92635C3.08046 3.91574 3.42074 4.32093 3.64468 4.72599C3.88424 5.15933 4.10594 5.79526 4.33533 6.63214C4.78297 8.25095 5.33179 9.99936 5.93252 11.3357C6.23406 12.0064 6.53701 12.5465 6.83047 12.9111C7.13988 13.2955 7.35241 13.3793 7.4597 13.3793C8.04015 13.3793 8.72417 13.1366 9.55755 12.509C10.3917 11.8809 11.3418 10.8921 12.4423 9.46323L14.9799 1.39074ZM14.9799 1.39074L14.9874 1.39862M14.9799 1.39074L14.9874 1.39862M14.9874 1.39862C15.338 1.76673 15.549 2.45607 15.4903 3.5376L15.4902 3.5376M14.9874 1.39862L15.4902 3.5376M15.4902 3.5376L15.4899 3.54442M15.4902 3.5376L15.4899 3.54442M15.4899 3.54442C15.4633 4.19952 15.2114 5.02391 14.6981 6.02812M15.4899 3.54442L14.6981 6.02812M14.6981 6.02812C14.1875 7.02705 13.4345 8.17281 12.4424 9.46314L14.6981 6.02812Z", fill: "currentColor", stroke: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.4708 9.75072H15.8999V11.1833H13.4708H13.3708V11.2833V13.7793H11.8044V11.2833V11.1833H11.7044H9.27529V9.75072H11.7044H11.8044V9.65072V7.15469H13.3708V9.65072V9.75072H13.4708Z", fill: "currentColor", stroke: "white", strokeWidth: 0.2 }));
 
@@ -2371,75 +2371,33 @@ const dropdownDefaultCSSData$1 = {
   maxDropdownHeight: 160
 };
 
-const Checkbox = props => {
-  const {
-    id,
-    name,
-    label,
-    disabled = false,
-    checked: controlledChecked,
-    partial = false,
-    onChange,
-    variant,
-    isDefaultHover = false,
-    labelFontSize = 12
-  } = props;
-  // Detect controlled vs uncontrolled mode
-  const isControlled = Object.prototype.hasOwnProperty.call(props, 'checked') && typeof controlledChecked !== 'undefined';
-  const [checked, setChecked] = React.useState(!!controlledChecked);
-  const inputRef = React.useRef(null);
-  // Keep internal state in sync when controlled
-  React.useEffect(() => {
-    if (isControlled) setChecked(!!controlledChecked);
-  }, [controlledChecked, isControlled]);
-  // Apply native indeterminate for partial state
+const Checkbox = ({
+  id,
+  name,
+  label,
+  disabled = false,
+  checked: initialChecked = false,
+  partial = false,
+  onChange,
+  variant,
+  isDefaultHover = false,
+  labelFontSize = 12
+}) => {
+  const [checked, setChecked] = React.useState(initialChecked);
   React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.indeterminate = partial && !checked;
-    }
-  }, [partial, checked]);
-  // Stop the grid/excel selection from hijacking events
-  const stopAllCapture = e => {
-    e.stopPropagation();
-    if (e.nativeEvent?.stopImmediatePropagation) {
-      // prevents other React and non-React listeners from firing
-      e.nativeEvent.stopImmediatePropagation();
-    }
-  };
-  const handleChange = e => {
-    if (!isControlled) {
-      setChecked(e.target.checked); // keep UI responsive even if parent doesn't update
-    }
-    onChange?.(e); // still notify parent
-  };
+    setChecked(initialChecked);
+  }, [initialChecked]);
   return jsxRuntime.jsxs("label", {
     className: "ff-checkbox--overlay",
     htmlFor: id,
-    // Shield at capture phase so document/grid listeners don't see these
-    onPointerDownCapture: stopAllCapture,
-    onMouseDownCapture: stopAllCapture,
-    onClickCapture: stopAllCapture,
-    // Small z-index bump helps if a low z-index overlay exists
-    style: {
-      position: 'relative',
-      zIndex: 2
-    },
-    "data-ff-checkbox-root": true,
     children: [jsxRuntime.jsx("input", {
-      ref: inputRef,
       type: "checkbox",
       className: "ff-checkbox-input",
       id: id,
       name: name,
-      checked: !!checked,
-      onChange: handleChange,
-      disabled: disabled,
-      "aria-checked": partial ? 'mixed' : checked,
-      "aria-disabled": disabled,
-      // Also shield on the input itself
-      onPointerDownCapture: stopAllCapture,
-      onMouseDownCapture: stopAllCapture,
-      onClickCapture: stopAllCapture
+      checked: checked,
+      onChange: onChange,
+      disabled: disabled
     }), jsxRuntime.jsx("span", {
       className: classNames('ff-checkbox-custom', {
         'ff-checkbox-checked': checked,
@@ -3757,6 +3715,7 @@ const Input$1 = /*#__PURE__*/React.forwardRef(({
   disableAfterMaxValueReached = false,
   pattern,
   background,
+  helperTextWidth,
   ...props
 }, ref) => {
   const isValueFilled = !checkEmpty(value) || type === 'password' && value?.length > 0;
@@ -3990,10 +3949,13 @@ const Input$1 = /*#__PURE__*/React.forwardRef(({
         }),
         children: (displayErrorImmediately || touched) && (error || isHelperTextRequired) ? helperText : ''
       }), !reserveHelperTextSpace && (displayErrorImmediately || touched) && helperText && (error || isHelperTextRequired) && jsxRuntime.jsx("span", {
-        className: classNames('ff-input-message', {
+        className: classNames(helperTextWidth ? 'ff-input-width' : 'ff-input-message', {
           'ff-input-message--showHelperText': !!isHelperTextRequired,
           'ff-input-message--danger': !!error
         }),
+        style: {
+          width: typeof helperTextWidth === 'number' ? `${helperTextWidth}px` : helperTextWidth || ''
+        },
         children: helperText
       })]
     })
@@ -6952,7 +6914,8 @@ const OptionCard = ({
   dropdownPlacement,
   variant,
   isAddResourceButton,
-  alignOption
+  alignOption,
+  ownerId
 }) => {
   const themeContext = React.useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -6973,6 +6936,7 @@ const OptionCard = ({
     }, {
       'ff-option-card--default': variant === 'default'
     }, currentTheme),
+    "data-owner-id": ownerId,
     style: {
       ...style,
       zIndex,
@@ -7010,9 +6974,12 @@ const MenuOption = ({
   isAddResourceButton,
   disabled,
   alignOption = 'left',
-  displayCard = true
+  displayCard = true,
+  didMouseEntered,
+  tableMenu = false
 }) => {
   const [isClicked, setIsClicked] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
   const menuRef = React.useRef(null);
   const menuIconRef = React.useRef(null);
   const [menuPosition, setMenuPosition] = React.useState({
@@ -7022,19 +6989,19 @@ const MenuOption = ({
     right: 0,
     width: 0
   });
+  const getTargetElement = React.useCallback(() => {
+    if (!targetRef) return null;
+    return typeof targetRef === 'string' ? document.getElementById(targetRef) : getAnchorElement(targetRef);
+  }, [targetRef]);
   const closeDropDown = () => setIsClicked(false);
   React.useEffect(() => {
-    if (targetRef && !checkEmpty(options)) {
-      const parentDom = getAnchorElement(targetRef);
-      parentDom?.classList.toggle('menu-hover-active', isClicked);
-    }
+    const targetElement = getTargetElement();
+    if (!targetElement || checkEmpty(options)) return;
+    targetElement.classList.toggle('menu-hover-active', isHovered || isClicked);
     return () => {
-      if (targetRef) {
-        const parentDom = getAnchorElement(targetRef);
-        parentDom?.classList.remove('menu-hover-active');
-      }
+      targetElement.classList.remove('menu-hover-active');
     };
-  }, [isClicked, targetRef, options]);
+  }, [isHovered, isClicked, targetRef, options, getTargetElement]);
   const getScrollableParent = element => {
     if (!element) return null;
     let parent = element.parentElement;
@@ -7073,6 +7040,9 @@ const MenuOption = ({
   }, []);
   const onIconClickHandler = () => {
     if (disabled) return;
+    if (didMouseEntered) {
+      didMouseEntered();
+    }
     onClick();
     calculateDims();
     setIsClicked(prev => !prev);
@@ -7110,6 +7080,8 @@ const MenuOption = ({
           }),
           ref: menuIconRef,
           onClick: onIconClickHandler,
+          onMouseEnter: () => tableMenu && !disabled && setIsHovered(true),
+          onMouseLeave: () => tableMenu && setIsHovered(false),
           style: {
             width: `${iconButtonSize}px`,
             height: `${iconButtonSize}px`,
@@ -7137,7 +7109,8 @@ const MenuOption = ({
       dropdownPlacement: dropdownPlacement,
       variant: optionCardVariant,
       isAddResourceButton: isAddResourceButton,
-      alignOption: alignOption
+      alignOption: alignOption,
+      ownerId: typeof targetRef !== 'string' && targetRef?.current?.id || treeRowRef?.current?.id
     })]
   });
 };
@@ -34716,7 +34689,7 @@ const MachineInputField = ({
   const getIcon = {
     local: 'local',
     browserstack: 'browserstack_icon',
-    saucelabs: 'sause_lab',
+    saucelabs: 'sause_lab_icon',
     lambdatest: 'lambda_icon',
     mac: 'mac_icon',
     mac_icon: 'mac_icon',
@@ -36228,15 +36201,17 @@ function addRowBottom(row) {
     row
   };
 }
-function addColumnLeft(column) {
+function addColumnLeft(columnWidth, column) {
   return {
     type: ADD_COLUMN_LEFT,
+    columnWidth,
     column
   };
 }
-function addColumnRight(column) {
+function addColumnRight(columnWidth, column) {
   return {
     type: ADD_COLUMN_RIGHT,
+    columnWidth,
     column
   };
 }
@@ -37075,20 +37050,16 @@ function deleteColumnDimension(columns, deleteIndex) {
   return updated;
 }
 /** Get the dimensions of cell at point from state */
-function getCellDimensions(point, rowDimensions, columnDimensions, visibleRange) {
+function getCellDimensions(point, rowDimensions, columnDimensions) {
   const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = 100;
-  const HEADER_HEIGHT = 32;
-  const ROW_INDICATOR_WIDTH = 60;
+  const DEFAULT_COLUMN_WIDTH = 100; // Use your minimumColumnWidth or a default value; adjust based on props if needed
+  const HEADER_HEIGHT = 32; // Adjust based on your header row height (e.g., from CSS or measured)
+  const ROW_INDICATOR_WIDTH = 60; // From your RowIndicator minWidth style
   let top = HEADER_HEIGHT;
   for (let r = 0; r < point.row; r++) {
     top += (rowDimensions?.[r] ? rowDimensions?.[r]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
   }
   const height = (rowDimensions?.[point.row] ? rowDimensions?.[point.row]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
-  if (visibleRange && rowDimensions && rowDimensions[visibleRange.start]) {
-    const visibleTop = rowDimensions[visibleRange.start]?.top || HEADER_HEIGHT;
-    top = top - visibleTop + HEADER_HEIGHT;
-  }
   let left = ROW_INDICATOR_WIDTH;
   for (let c = 0; c < point.column; c++) {
     left += (columnDimensions?.[c] ? columnDimensions?.[c]?.width : DEFAULT_COLUMN_WIDTH) || DEFAULT_COLUMN_WIDTH;
@@ -37102,20 +37073,16 @@ function getCellDimensions(point, rowDimensions, columnDimensions, visibleRange)
   };
 }
 /** Get the dimensions of customized cell at point from state */
-function getScrollCellDimensions(point, rowDimensions, columnDimensions, visibleRange) {
+function getScrollCellDimensions(point, rowDimensions, columnDimensions) {
   const DEFAULT_ROW_HEIGHT = 32;
-  const DEFAULT_COLUMN_WIDTH = 100;
-  const HEADER_HEIGHT = 32;
+  const DEFAULT_COLUMN_WIDTH = 100; // Use your minimumColumnWidth or a default value
+  const HEADER_HEIGHT = 32; // Adjust as needed
   const ROW_INDICATOR_WIDTH = 60;
-  let top = HEADER_HEIGHT;
+  let top = HEADER_HEIGHT + 4000; // Preserve your fixed top for scrolling, but add header offset
   for (let r = 0; r < point.row; r++) {
     top += (rowDimensions?.[r] ? rowDimensions?.[r]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
   }
   const height = (rowDimensions?.[point.row] ? rowDimensions?.[point.row]?.height : DEFAULT_ROW_HEIGHT) || DEFAULT_ROW_HEIGHT;
-  if (visibleRange && rowDimensions && rowDimensions[visibleRange.start]) {
-    const visibleTop = rowDimensions[visibleRange.start]?.top || HEADER_HEIGHT;
-    top = top - visibleTop + HEADER_HEIGHT;
-  }
   let left = ROW_INDICATOR_WIDTH;
   for (let c = 0; c < point.column; c++) {
     left += (columnDimensions?.[c] ? columnDimensions?.[c]?.width : DEFAULT_COLUMN_WIDTH) || DEFAULT_COLUMN_WIDTH;
@@ -37139,24 +37106,14 @@ function getRangeDimensions(rowDimensions, columnDimensions, range) {
     width: endDimensions.left + endDimensions.width - startDimensions.left,
     height: endDimensions.top + endDimensions.height - startDimensions.top,
     top: startDimensions.top + 1,
-    left: startDimensions.left + 1
+    // Note: +1 Because of Active cell width is 2px
+    left: startDimensions.left + 1 // Note: +1 Because of Active cell width is 2px
   };
 }
 /** Get the dimensions of selected */
-function getSelectedDimensions(rowDimensions, columnDimensions, data, selected, visibleRange) {
+function getSelectedDimensions(rowDimensions, columnDimensions, data, selected) {
   const range = selected.toRange(data);
-  if (!range) return undefined;
-  let startDimensions = getCellDimensions(range.start, rowDimensions, columnDimensions, visibleRange);
-  let endDimensions = getCellDimensions(range.end, rowDimensions, columnDimensions, visibleRange);
-  if (endDimensions === undefined) {
-    endDimensions = getScrollCellDimensions(range.end, rowDimensions, columnDimensions, visibleRange);
-  }
-  return startDimensions && endDimensions && {
-    width: endDimensions.left + endDimensions.width - startDimensions.left,
-    height: endDimensions.top + endDimensions.height - startDimensions.top,
-    top: startDimensions.top + 1,
-    left: startDimensions.left + 1
-  };
+  return range ? getRangeDimensions(rowDimensions, columnDimensions, range) : undefined;
 }
 /** Get given data as CSV */
 function getCSV(data) {
@@ -38151,7 +38108,7 @@ function dragEndFormatePainter(currentData, selectedRange, formattedStyle) {
   }
   return updatedData;
 }
-function dragEndAutoFill(currentData, selectedRange, cellValue, activeCell) {
+function dragEndAutoFill(currentData, selectedRange, cellValue, activeCell, control) {
   if (!selectedRange) {
     return currentData;
   }
@@ -38189,6 +38146,8 @@ function dragEndAutoFill(currentData, selectedRange, cellValue, activeCell) {
     };
   }
   let updatedData = currentData;
+  const matches = [...cellValue.value.matchAll(/(\d+)/g)];
+  const hasNumbers = matches.length > 0;
   for (let row = startPoint.row; row <= endPoint.row; row++) {
     for (let col = startPoint.column; col <= endPoint.column; col++) {
       const currentCell = get$1({
@@ -38198,10 +38157,20 @@ function dragEndAutoFill(currentData, selectedRange, cellValue, activeCell) {
       if (!currentCell || currentCell.readOnly || ['file'].includes(currentCell?.inputType?.type || '')) {
         continue;
       }
+      let newValue = cellValue.value;
+      if (!control && hasNumbers) {
+        const step = (row - startPoint.row) * (endPoint.column - startPoint.column + 1) + (col - startPoint.column);
+        let index = 0;
+        newValue = newValue.replace(/(\d+)/g, () => {
+          const originalNum = parseInt(matches[index][0], 10);
+          index++;
+          return (originalNum + step).toString();
+        });
+      }
       const updatedCell = {
         ...currentCell,
         style: cellValue.style,
-        value: cellValue.value,
+        value: newValue,
         inputType: cellValue.inputType
       };
       updatedData = set$1({
@@ -38542,7 +38511,8 @@ const INITIAL_STATE = {
     open: false,
     style: undefined
   },
-  editable: false
+  editable: false,
+  ctrl: true
 };
 function reducer(state, action) {
   switch (action.type) {
@@ -38640,7 +38610,8 @@ function reducer(state, action) {
           columnDimensions
         } = state;
         const {
-          column
+          column,
+          columnWidth = 100
         } = action;
         if (checkEmpty(column ?? selectedColumn)) {
           return state;
@@ -38656,7 +38627,7 @@ function reducer(state, action) {
           model: updatedModel,
           selectedRow: selectedRow,
           selectedColumn: insertIndex,
-          columnDimensions: insertColumnDimension(columnDimensions, insertIndex, 150)
+          columnDimensions: insertColumnDimension(columnDimensions, insertIndex, columnWidth)
         };
       }
     case ADD_COLUMN_RIGHT:
@@ -38668,7 +38639,8 @@ function reducer(state, action) {
           columnDimensions
         } = state;
         const {
-          column
+          column,
+          columnWidth = 100
         } = action;
         if (checkEmpty(column ?? selectedColumn)) {
           return state;
@@ -38684,7 +38656,7 @@ function reducer(state, action) {
           model: updatedModel,
           selectedRow: selectedRow,
           selectedColumn: (column ?? selectedColumn) + 1,
-          columnDimensions: insertColumnDimension(columnDimensions, (column ?? selectedColumn) + 1, 150)
+          columnDimensions: insertColumnDimension(columnDimensions, (column ?? selectedColumn) + 1, columnWidth)
         };
       }
     case DELETE_ROW:
@@ -39195,6 +39167,12 @@ function reducer(state, action) {
         const {
           event
         } = action.payload;
+        if (event.ctrlKey) {
+          return {
+            ...state,
+            ctrl: !state.ctrl
+          };
+        }
         if (isActiveReadOnly(state) || event.metaKey || !state.editable) {
           return state;
         }
@@ -39281,7 +39259,7 @@ function reducer(state, action) {
           updatedData = dragEndFormatePainter(state.model.data, selectedRange, state.formattedStyle);
         }
         if (state.autoFill.open && state.editable && selectedRange) {
-          updatedData = dragEndAutoFill(state.model.data, selectedRange, state.autoFill.cellValue, activeCell);
+          updatedData = dragEndAutoFill(state.model.data, selectedRange, state.autoFill.cellValue, activeCell, state.ctrl);
           let {
             start,
             end
@@ -40711,17 +40689,17 @@ const ColumnIndicator = ({
 }) => {
   const dispatch = useDispatch();
   const minColumnWidth = minimumColumnWidth;
+  const columnWidth = useSelector(state => state.columnDimensions[column]?.width || minColumnWidth);
   const matrixData = useSelector(state => state.model.data);
   const {
     columnCount
   } = getMatrixDimensions(matrixData);
-  const columnWidth = useSelector(state => matrixData?.[0]?.[column]?.style?.width ?? (state.columnDimensions[column]?.width || minColumnWidth));
   const options = React.useMemo(() => {
     return [{
       label: 'Add Column Left',
       value: 'Add Column Left',
       iconName: 'plus_icon',
-      action: () => addColumnLeft(),
+      action: () => addColumnLeft(minColumnWidth),
       disableTooltip: 'Column limit reached',
       visible: cell?.contextDisable?.['Add Column Left'] ?? false,
       disable: columnCount >= maxColLimit
@@ -40729,7 +40707,7 @@ const ColumnIndicator = ({
       label: 'Add Column Right',
       value: 'Add Column Right',
       iconName: 'plus_icon',
-      action: () => addColumnRight(),
+      action: () => addColumnRight(minColumnWidth),
       disableTooltip: 'Column limit reached',
       visible: cell?.contextDisable?.['Add Column Right'] ?? false,
       disable: columnCount >= maxColLimit
@@ -40748,7 +40726,7 @@ const ColumnIndicator = ({
     const targetColumn = Math.max(getTargetColumn, 0);
     onSelect(targetColumn, event.shiftKey);
     const startX = event.clientX;
-    const initialWidth = Number(columnWidth);
+    const initialWidth = columnWidth;
     const onMouseMove = moveEvent => {
       const newWidth = Math.max(minColumnWidth, initialWidth + (moveEvent.clientX - startX));
       dispatch(setColumnPosition(targetColumn, newWidth));
@@ -40783,7 +40761,6 @@ const ColumnIndicator = ({
         options
       }));
     }
-    document.body.style.pointerEvents = 'auto';
   }, [column, selectedColumn, columnContextEnable, options, contextMenu?.contextType]);
   return jsxRuntime.jsxs("th", {
     className: classNames('ff-spreadsheet-header', {
@@ -40858,7 +40835,8 @@ const RowIndicator = ({
   cell,
   maxRowLimit,
   disableDeleteOption,
-  contextMenu
+  contextMenu,
+  setVisibleRange
 }) => {
   const dispatch = useDispatch();
   const rowHeight = useSelector(state => state.rowDimensions[row]?.height || 32);
@@ -40866,12 +40844,21 @@ const RowIndicator = ({
   const {
     rowCount
   } = getMatrixDimensions(matrixData);
+  const updateVisibleRangeEnd = action => {
+    setVisibleRange(prev => ({
+      ...prev,
+      end: action === 'increment' ? prev.end + 1 : prev.end - 1
+    }));
+  };
   const options = React__namespace.useMemo(() => {
     return [{
       label: 'Add Row Top',
       value: 'Add Row Top',
       iconName: 'plus_icon',
-      action: () => addRowTop(),
+      action: () => {
+        updateVisibleRangeEnd('increment');
+        addRowTop();
+      },
       disableTooltip: 'Row limit reached',
       visible: cell?.contextDisable?.['Add Row Top'] ?? false,
       disable: rowCount >= maxRowLimit
@@ -40879,7 +40866,10 @@ const RowIndicator = ({
       label: 'Add Row Bottom',
       value: 'Add Row Bottom',
       iconName: 'plus_icon',
-      action: () => addRowBottom(),
+      action: () => {
+        updateVisibleRangeEnd('increment');
+        addRowBottom();
+      },
       disableTooltip: 'Row limit reached',
       visible: cell?.contextDisable?.['Add Row Bottom'] ?? false,
       disable: rowCount >= maxRowLimit
@@ -40887,7 +40877,10 @@ const RowIndicator = ({
       label: 'Delete Row',
       value: 'Delete Row',
       iconName: 'delete',
-      action: () => deleteRow(),
+      action: () => {
+        updateVisibleRangeEnd('decrement');
+        deleteRow();
+      },
       disableTooltip: '',
       visible: cell?.contextDisable?.['Delete Row'] ?? false,
       disable: false
@@ -40933,7 +40926,6 @@ const RowIndicator = ({
         options
       }));
     }
-    document.body.style.pointerEvents = 'auto';
   }, [row, rowContextEnable, options, selectedRow, contextMenu?.contextType]);
   return jsxRuntime.jsxs("th", {
     className: classNames('ff-spreadsheet-header', {
@@ -41176,9 +41168,7 @@ const DataEditor = ({
     children: jsxRuntime.jsx("textarea", {
       className: "ff-spreadsheet-cell-textarea",
       style: {
-        ...cell?.style,
-        width: '100%',
-        height: '100%'
+        ...cell?.style
       },
       ref: inputRef,
       onChange: handleChange,
@@ -41200,20 +41190,36 @@ const ActiveCell = props => {
   const view = React__namespace.useCallback(() => {
     dispatch(view$1());
   }, [dispatch]);
+  const rowDimensions = useSelector(state => state.rowDimensions);
   const active = useSelector(state => state.active);
   const mode = useSelector(state => state.mode);
   const cell = useSelector(state => state.active ? get$1(state.active, state.model.data) : undefined);
   const dimensions = useSelector(state => {
-    let dimensionValue = active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions, props.visibleRange) : undefined;
+    let dimensionValue = active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions) : undefined;
     dimensionValue = {
-      top: dimensionValue?.top ? dimensionValue?.top + 1 : 0,
-      height: dimensionValue?.height ? dimensionValue?.height - 2 : 0,
-      left: dimensionValue?.left ? dimensionValue?.left + 1 : 0,
+      top: dimensionValue?.top ? dimensionValue?.top : 0,
+      height: dimensionValue?.height ? dimensionValue?.height : 0,
+      left: dimensionValue?.left ? dimensionValue?.left : 0,
       // Note: +1 Because of Active cell width is 2px
-      width: dimensionValue?.width ? dimensionValue?.width - 2 : 0
+      width: dimensionValue?.width ? dimensionValue?.width : 0
     };
     return dimensionValue;
   });
+  const offset = React__namespace.useMemo(() => {
+    let sum = 0;
+    const DEFAULT_ROW_HEIGHT = 32;
+    for (let r = 0; r < props.visibleRange.start; r++) {
+      sum += rowDimensions[r]?.height || DEFAULT_ROW_HEIGHT;
+    }
+    return sum;
+  }, [rowDimensions, props.visibleRange.start]);
+  const adjustedDimensions = React__namespace.useMemo(() => {
+    if (!dimensions) return undefined;
+    return {
+      ...dimensions,
+      top: dimensions.top - offset
+    };
+  }, [dimensions, offset]);
   const hidden = React__namespace.useMemo(() => !active || !dimensions, [active, dimensions]);
   const initialCellRef = React__namespace.useRef(undefined);
   const prevActiveRef = React__namespace.useRef(null);
@@ -41574,7 +41580,7 @@ const ActiveCell = props => {
   return jsxRuntime.jsxs("div", {
     ref: rootRef,
     className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
-    style: dimensions,
+    style: adjustedDimensions,
     onContextMenu: contextClick,
     onClick: mode === 'view' && !readOnly ? edit : undefined,
     tabIndex: 0,
@@ -41627,8 +41633,6 @@ const ActiveCell = props => {
       className: "ff-spreadsheet-cell-textarea",
       style: {
         ...cell?.style,
-        height: '100%',
-        width: '100%',
         textDecoration: 'normal',
         borderTop: '',
         borderBottom: '',
@@ -41679,8 +41683,8 @@ const FloatingRect = ({
       'ff-spreadsheet-floating-rect--hidden': hidden
     }),
     style: {
-      width: adjustedWidth ? adjustedWidth - 2 : 0,
-      height: adjustedHeight ? adjustedHeight - 2 : 0,
+      width: (adjustedWidth ?? 0) + 1,
+      height: (adjustedHeight ?? 0) + 1,
       top,
       left
     }
@@ -41691,14 +41695,33 @@ const Selected = ({
   visibleRange
 }) => {
   const selected = useSelector(state => state.selected);
-  const dimensions = useSelector(state => {
-    return selected && getSelectedDimensions(state.rowDimensions, state.columnDimensions, state.model.data, state.selected, visibleRange);
-  });
+  const rowDimensions = useSelector(state => state.rowDimensions);
   const dragging = useSelector(state => state.dragging);
   const hidden = useSelector(state => state.selected.size(state.model.data) < 2);
+  const dimensions = useSelector(state => {
+    return selected && getSelectedDimensions(state.rowDimensions, state.columnDimensions, state.model.data, state.selected);
+  });
+  const offset = React__namespace.useMemo(() => {
+    let sum = 0;
+    const DEFAULT_ROW_HEIGHT = 32;
+    for (let r = 0; r < visibleRange.start; r++) {
+      sum += rowDimensions[r]?.height || DEFAULT_ROW_HEIGHT;
+    }
+    return sum;
+  }, [rowDimensions, visibleRange.start]);
+  const adjustedDimensions = React__namespace.useMemo(() => {
+    if (!dimensions) return undefined;
+    return {
+      ...dimensions,
+      top: dimensions.top - offset - 1,
+      left: dimensions.left - 1,
+      height: dimensions.height + 2,
+      width: dimensions.width + 2
+    };
+  }, [dimensions, offset]);
   return jsxRuntime.jsx(FloatingRect, {
     variant: "selected",
-    dimensions: dimensions,
+    dimensions: adjustedDimensions,
     dragging: dragging,
     hidden: hidden
   });
@@ -41823,9 +41846,7 @@ function convertStyleToFrontend(backendStyle) {
     borderRight: borderRight,
     borderBottom: borderBottom,
     borderLeft: borderLeft,
-    textAlign: getTextAlignment(backendStyle.alignment.horizontal),
-    height: backendStyle.height ?? 32,
-    width: backendStyle.width ?? 150
+    textAlign: getTextAlignment(backendStyle.alignment.horizontal)
   };
 }
 const getBorderStyle = border => {
@@ -41861,9 +41882,7 @@ const convertStyleToBackend = frontendStyle => {
       horizontal: getTextAlignmentBack(frontendStyle.textAlign),
       vertical: 'BOTTOM',
       wrapText: false
-    },
-    width: frontendStyle.width || 150,
-    height: frontendStyle.height || 32
+    }
   };
 };
 
@@ -42355,19 +42374,6 @@ const Spreadsheet = props => {
     }
     prevEvaluatedDataRef.current = state.model.evaluatedData;
   }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
-  React__namespace.useEffect(() => {
-    if (size.rows < 100) {
-      setVisibleRange({
-        start: 0,
-        end: size.rows
-      });
-    } else {
-      setVisibleRange({
-        start: 0,
-        end: 100
-      });
-    }
-  }, [sheetChange, size.rows]);
   const prevSelectedRef = React__namespace.useRef(state.selected);
   React__namespace.useEffect(() => {
     if (!state.selected.equals(prevSelectedRef.current)) {
@@ -42393,7 +42399,7 @@ const Spreadsheet = props => {
       setData$1(props.data);
     }
     prevDataPropRef.current = props.data;
-  }, [props.data, setData$1]);
+  }, [props.data, setData$1, editable$1]);
   const prevCreateFormulaParserPropRef = React__namespace.useRef(props.createFormulaParser);
   React__namespace.useEffect(() => {
     if (props.createFormulaParser !== prevCreateFormulaParserPropRef.current && props.createFormulaParser) setCreateFormulaParser$1(props.createFormulaParser);
@@ -42481,7 +42487,7 @@ const Spreadsheet = props => {
   const Cell$1 = React__namespace.useMemo(() => {
     // @ts-ignore
     return enhance(props.Cell || Cell);
-  }, [props.Cell, sheetChange]);
+  }, [props.Cell, sheetChange, editable$1]);
   const CornerIndicator$1 = React__namespace.useMemo(() => enhance$3(props.CornerIndicator || CornerIndicator), [props.CornerIndicator, sheetChange]);
   const RowIndicator$1 = React__namespace.useMemo(() => enhance$1(props.RowIndicator || RowIndicator), [props.RowIndicator, sheetChange]);
   const ColumnIndicator = React__namespace.useMemo(() => enhance$2(props.ColumnIndicator || EnhancedColumnIndicator), [props.ColumnIndicator, sheetChange]);
@@ -42512,12 +42518,14 @@ const Spreadsheet = props => {
       end: newEnd
     });
     // Wait until next frame to scroll
-    requestAnimationFrame(() => {
-      rootRef.current?.scrollTo({
-        top: 1300,
-        behavior: 'instant'
+    if (size.rows > 100) {
+      requestAnimationFrame(() => {
+        rootRef.current?.scrollTo({
+          top: 1300,
+          behavior: 'instant'
+        });
       });
-    });
+    }
     removeSelection();
   };
   const throttledHandleScroll = React__namespace.useMemo(() => throttle(e => {
@@ -42532,7 +42540,7 @@ const Spreadsheet = props => {
       const rowHeight = 50;
       const totalScroll = Math.ceil((size.rows - visibleRows) / rowHeight);
       const dynamicScroll = scrollHeight - offsetHeight;
-      if (size.rows < 100) {
+      if (size.rows < visibleRows) {
         updateVisibleRange(0, size.rows, 0);
         setScrollCount(0);
       } else if (scrollTop === 0 && scrollCount !== 0) {
@@ -42611,7 +42619,8 @@ const Spreadsheet = props => {
         rowContextEnable: props.rowContextEnable,
         maxRowLimit: maxRowLimit,
         disableDeleteOption: disableDeleteOption,
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        setVisibleRange: setVisibleRange
       }, rowNumber) : jsxRuntime.jsx(RowIndicator$1, {
         row: rowNumber,
         addRowTop: addRowTop$1,
@@ -42621,7 +42630,8 @@ const Spreadsheet = props => {
         rowContextEnable: props.rowContextEnable,
         maxRowLimit: maxRowLimit,
         disableDeleteOption: disableDeleteOption,
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        setVisibleRange: setVisibleRange
       }, rowNumber), range(size.columns).map(columnNumber => jsxRuntime.jsx(Cell$1, {
         row: rowNumber,
         column: columnNumber,
@@ -43130,8 +43140,6 @@ const ExcelFile = ({
     const target = event.target;
     if (!(target.closest('.ff-excel-tab-list') || target.closest('.ff-excel-sheet')) || isLeftClick) {
       if (contextMenu.open) {
-        event.preventDefault();
-        event.stopPropagation();
         setContextMenu({
           open: false,
           contextType: null,
@@ -43145,6 +43153,10 @@ const ExcelFile = ({
             disable: false
           }]
         });
+        if (!isLeftClick) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
       }
     }
   }, [contextMenu.open]);
@@ -43153,7 +43165,7 @@ const ExcelFile = ({
     document.addEventListener('click', e => handleClickOutside(e, true));
     return () => {
       document.removeEventListener('contextmenu', handleClickOutside);
-      document.addEventListener('click', e => handleClickOutside(e, true));
+      document.removeEventListener('click', e => handleClickOutside(e, true));
     };
   }, [handleClickOutside]);
   const contextClick = (event, name, index) => {
@@ -43228,11 +43240,6 @@ const ExcelFile = ({
       y: sheetRefY + contextHeightPositioning
     });
   };
-  React.useEffect(() => {
-    return () => {
-      document.body.style.pointerEvents = 'auto';
-    };
-  }, []);
   const unsetContextPosition = e => {
     e.stopPropagation();
     if (contextMenu.open) {
@@ -46952,7 +46959,7 @@ const VariableDropdown = ({
       overscan: 10,
       fixedItemHeight: itemHeight
     }) : jsxRuntime.jsx("div", {
-      className: "ff-variable-option",
+      className: "ff-variable-option ff-variable-option-no-data",
       children: jsxRuntime.jsx(Typography, {
         as: "span",
         fontSize: 12,
@@ -47597,7 +47604,7 @@ const OptionsDropdown$1 = ({
         })
       }, option?.id);
     }) : jsxRuntime.jsx("div", {
-      className: "ff-variable-option",
+      className: "ff-variable-option no-data",
       children: jsxRuntime.jsx(Typography, {
         as: "div",
         children: "No Option",
@@ -47637,6 +47644,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   clearIcon = true,
   inputTitle = '',
   onBlur,
+  helperTextWidth,
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -47800,12 +47808,12 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
     children: [jsxRuntime.jsxs("div", {
       className: "ff-add-variable-input",
       ref: containerRef,
-      children: [jsxRuntime.jsx(Tooltip, {
+      children: [jsxRuntime.jsxs(Tooltip, {
         title: inputTitle,
         style: {
           width: '100%'
         },
-        children: jsxRuntime.jsx(Input$1, {
+        children: [jsxRuntime.jsx(Input$1, {
           ...props,
           name: "add_variable",
           ref: inputRef,
@@ -47830,8 +47838,18 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
           helperText: helperText,
           error: error,
           required: required,
+          helperTextWidth: helperTextWidth,
           ...formProps
-        })
+        }), !checkEmpty(value) && showCreateVariableIcon && showAddVariableIcon && jsxRuntime.jsx("div", {
+          className: "ff-create-variable-container",
+          onClick: onCreateVariableClick,
+          children: jsxRuntime.jsx(Typography, {
+            fontWeight: "regular",
+            fontSize: "10px",
+            color: 'var(--brand-color)',
+            children: "Create Variable"
+          })
+        })]
       }), !checkEmpty(value) && !isOnlyHash && jsxRuntime.jsx("div", {
         className: "ff-cancel-icon-container",
         children: clearIcon && jsxRuntime.jsx(Tooltip, {
@@ -47848,13 +47866,6 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
           })
         })
       })]
-    }), !checkEmpty(value) && showCreateVariableIcon && showAddVariableIcon && jsxRuntime.jsx("div", {
-      className: "ff-create-variable-container",
-      onClick: onCreateVariableClick,
-      children: jsxRuntime.jsx(Tooltip, {
-        title: "Create as Variable",
-        children: "Create Variable"
-      })
     }), result?.showDropdown && isFocused && jsxRuntime.jsx(VariableDropdown, {
       position: "absolute",
       zIndex: zIndex,
@@ -65353,7 +65364,7 @@ const OptionsDropdown = ({
         })
       }, option?.id);
     }), filteredOptions?.length === 0 && jsxRuntime.jsx("div", {
-      className: "ff-variable-option",
+      className: "ff-variable-option .ff-variable-option-no-data ",
       children: jsxRuntime.jsx(Typography, {
         as: "span",
         fontSize: 14,