@superblocksteam/library 2.0.6-next.32 → 2.0.6-next.34

package/dist/{index-CJnCDVsr.js → index-CQOHJMew.js}

@@ -49,7 +49,7 @@ var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "acc
 var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _cancelApi_dec, _runApi_dec, _init2, _renameWidget_dec, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _deleteComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_dec, _init3, _addOptimisticCreateWidget_dec, _processRootWidget_dec, _init4, _refreshPositionsAndGetDropConstraints_dec, _init5, _updateChildPositions_dec, _setWidgetPosition_dec, _setActiveTargetRect_dec, _setActiveDragRect_dec, _setDropTargetId_dec, _setInvalidDropTarget_dec, _setValidRootIds_dec, _cancelNewComponentDrag_dec, _startNewComponentDrag_dec, _setIsDragging_dec, _setWidgetFeatures_dec, _init6;
 import * as React from "react";
 import React__default, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Suspense, Children, memo, useReducer, useSyncExternalStore, PureComponent, createRef } from "react";
-import { S as SvgClose, a as SvgSystemDanger, b as SvgSystemInfo, c as SvgSystemError, d as SvgSystemSuccess, e as SvgPlus, f as SvgHide, g as SvgChevronDown, h as SvgEmptyCheckbox, i as SvgMinus, j as SvgCheckmark, k as SvgCopy, l as SvgExternalLink, m as SvgPlay, n as SvgDownload, o as SvgTrash, p as SvgFilter, q as SvgFreeze, r as SvgSort, s as SvgEllipsis, t as SvgCrossXs, u as SvgClark } from "./icons-NrNO8p_u.js";
+import { S as SvgClose, a as SvgSystemDanger, b as SvgSystemInfo, c as SvgSystemError, d as SvgSystemSuccess, e as SvgPlus, f as SvgHide, g as SvgChevronDown, h as SvgEmptyCheckbox, i as SvgMinus, j as SvgCheckmark, k as SvgPlay, l as SvgDownload, m as SvgTrash, n as SvgFilter, o as SvgFreeze, p as SvgSort, q as SvgEllipsis, r as SvgCrossXs, s as SvgClark } from "./icons-lSlfQ50w.js";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { unstable_batchedUpdates, flushSync, createPortal } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
@@ -6001,11 +6001,11 @@ function PropertyInfo(value, type5 = "STATIC", extra) {
 const Property = {
   Static: (value) => PropertyInfo(value, "STATIC"),
   Binding: (value) => PropertyInfo(value, "BINDING"),
-  Template: (value) => PropertyInfo(value, "TEMPLATE"),
+  Template: (value, args) => PropertyInfo(value, "TEMPLATE", { args }),
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 || typeof args === "string" ? { args } : {}),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", { args }),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -6025,6 +6025,18 @@ function withBindingIdentifier(params, identifier2) {
     [BindingMetaSymbol]: identifier2
   };
 }
+function getSingleArgString(arg) {
+  if (Array.isArray(arg)) {
+    return `{ ${arg.map(getSingleArgString).join(", ")} }`;
+  }
+  return arg.name;
+}
+function getComputedArgsString(args) {
+  if (!args || args.length === 0) {
+    return "";
+  }
+  return args.map(getSingleArgString).join(", ");
+}
 const isDimension = (value) => {
   return typeof value === "object" && value !== null && "mode" in value && ["px", "fit", "fill", "%", "columns", "rows"].includes(value.mode) && (value.mode === "fit" || "value" in value);
 };
@@ -82975,6 +82987,11 @@ class Prop {
     this.prop.nestedBindings = true;
     throw new Error("Nested bindings are not supported yet");
   }
+  contextual(computedArgs) {
+    this.prop.contextual = true;
+    this.prop.computedArgs = computedArgs;
+    return this;
+  }
   validate(validateFn) {
     this.prop.validate = validateFn;
     return this;
@@ -83096,6 +83113,9 @@ class Prop {
         ...rest
       };
     }
+    if (this.prop.computedArgs) {
+      propertiesPanelDisplay.computedArgs = typeof this.prop.computedArgs === "function" ? this.prop.computedArgs(entity) : this.prop.computedArgs;
+    }
     const propertiesPanelDisplayWithPanelConfig = {
       ...propertiesPanelDisplay,
       ...panelConfig && { panelConfig }
@@ -83506,7 +83526,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-Bx5_5I-I.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-BQ5Eme4s.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83519,7 +83539,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-Bx5_5I-I.js").then((module2) => ({
+  return import("./devtools-consolidated-BQ5Eme4s.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83612,9 +83632,32 @@ class EvalComputeEngine {
         })()
     }`
     ));
+    __publicField(this, "statementFunctionNoSnapshot", new Function(
+      ARGS_VAR_NAME,
+      USER_JS_CODE_VAR_NAME,
+      /*js*/
+      `return (() => {
+            "use strict";
+            return eval("(" + ${USER_JS_CODE_VAR_NAME} + ")").call(this, ...${ARGS_VAR_NAME});
+        })()`
+    ));
   }
-  compute({ snapshot, entityName, func, args, path: path2 }) {
+  compute({
+    snapshot,
+    entityName,
+    func,
+    args,
+    path: path2,
+    excludeState
+  }) {
     try {
+      if (excludeState) {
+        return this.statementFunctionNoSnapshot.call(
+          snapshot[entityName.value],
+          args || [],
+          func.toString()
+        );
+      }
       const globalScope = createGlobalObject({ snapshot });
       return this.statementFunction.call(
         snapshot[entityName.value],
@@ -84018,7 +84061,7 @@ const isLazyFunction = (value) => {
   return typeof value === "function" && value[lazyFunctionSymbol];
 };
 const LazyFunction = (source2, args = []) => {
-  const argsObj = `{ ${args.join(", ")} }`;
+  const argsObj = getComputedArgsString(args);
   const func = new Function(argsObj, source2);
   func[lazyFunctionSymbol] = true;
   return func;
@@ -84353,7 +84396,6 @@ class EntityManager {
   }
   addProperty(scopeId, name, prop, eov) {
     if (prop.split(".").includes(RECORD_PATH_IDENTIFIER)) {
-      console.log(`ALERT: Cannot add a property with a record path (${prop})`);
       return;
     }
     const entity = this.getScope(scopeId).getEntity(name);
@@ -84409,6 +84451,14 @@ class EntityManager {
       }
       return;
     }
+    let finalProp = prop;
+    if (isNested) {
+      finalProp = this.componentRegistry.getPropertyWithRecordIdentifier(
+        entityType,
+        prop
+      );
+    }
+    const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === finalProp);
     const getValue2 = computed(() => {
       let ret = null;
       try {
@@ -84417,18 +84467,30 @@ class EntityManager {
           ret = metaParent[finalSegment];
         } else {
           if (isComputed) {
-            ret = computeEngine.compute({
-              snapshot: snapshot(scopeId),
-              entityName: name,
-              func: eov.value,
-              path: prop
-            });
+            if (managedProp == null ? void 0 : managedProp.contextual) {
+              ret = function(context2) {
+                return computeEngine.compute({
+                  snapshot: snapshot(scopeId),
+                  entityName: name,
+                  func: eov.value,
+                  path: prop,
+                  args: [context2],
+                  excludeState: true
+                });
+              };
+            } else {
+              ret = computeEngine.compute({
+                snapshot: snapshot(scopeId),
+                entityName: name,
+                func: eov.value,
+                path: prop
+              });
+            }
           } else {
             ret = eov.value;
           }
         }
-        const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === prop);
-        if (managedProp == null ? void 0 : managedProp.validate) {
+        if ((managedProp == null ? void 0 : managedProp.validate) && typeof ret !== "function") {
           const currentState = snapshot(scopeId);
           const entity2 = currentState[name.value];
           const validationResult = managedProp.validate(ret, entity2);
@@ -84446,13 +84508,13 @@ class EntityManager {
           if (!validationResult.valid) {
             return void 0;
           }
-          return validationResult.result;
+          ret = validationResult.result;
         }
+        return ret;
       } catch (_e2) {
         console.log("Could not compute property value");
         return void 0;
       }
-      return ret;
     });
     const setValue = (value) => {
       const metaParent = getMetaParent();
@@ -85919,6 +85981,24 @@ class ComponentRegistry {
   getComponent(type5) {
     return this._typeRegistry.get(type5) ?? this._customComponentRegistry.get(type5);
   }
+  /**
+   * Get the property path with the record identifier if it exists. For example,
+   * `columns.columnName.label` becomes `columns.*.label`, for record properties.
+   */
+  getPropertyWithRecordIdentifier(type5, path2) {
+    const managedProps = this.getManagedProps(type5);
+    const splitPath = path2.split(".");
+    if (splitPath.length === 1) {
+      return path2;
+    }
+    const [parentKey, _maybeTheRecordKey, ...rest] = splitPath;
+    for (const prop of managedProps) {
+      if (prop.path.startsWith(parentKey) && prop.path.includes(RECORD_PATH_IDENTIFIER) && rest.length > 0 && prop.path.endsWith(rest.join("."))) {
+        return [parentKey, RECORD_PATH_IDENTIFIER, rest.join(".")].join(".");
+      }
+    }
+    return path2;
+  }
 }
 const DEFAULT_ANONYMOUS_SOURCE_ID = "SB--anon-src";
 const DEFAULT_ROOT_KEY = Symbol("DEFAULT_KEY");
@@ -86940,7 +87020,10 @@ function getPropertyValue$1({
   }
   if (property.type === "COMPUTED" && typeof property.value === "string" && scopeId && name) {
     try {
-      return LazyFunction(getRuntimeComputedExpression(property.value));
+      return LazyFunction(
+        getRuntimeComputedExpression(property.value),
+        property.args
+      );
     } catch (e3) {
       console.error("Error generating computed value", e3);
       const entity = rootStore.entityManager.getEntity(scopeId, name);
@@ -91080,14 +91163,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BRtFt6t5.js"
+            "./allPathsLoader-yqClhllT.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BIQRx5NP.js"
+            "./splitPathsBySizeLoader-BV47-5ws.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -119098,7 +119181,7 @@ function useTypographyStyling({
   };
 }
 const DEFAULT_ICON_SPACING = 8;
-const DEFAULT_ICON_SIZE$1 = 16;
+const DEFAULT_ICON_SIZE = 16;
 const ICON_POSITION_OPTIONS = [
   {
     icon: "ICON_LEFT_ALIGN",
@@ -126306,9 +126389,9 @@ const getIconPositionStyle = ({
     right: offsetRight === "auto" ? offsetRight : `${offsetRight}px`
   };
 };
-const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE$1, withSpacing = true) => {
+const getIconPadding = (paddingValue = INPUT_PADDING.right, iconSize = DEFAULT_ICON_SIZE, withSpacing = true) => {
   const spacing2 = withSpacing ? DEFAULT_ICON_SPACING : 0;
-  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE$1;
+  const baseValue = iconSize ? iconSize + spacing2 : DEFAULT_ICON_SIZE;
   return Dim.px(baseValue + (paddingValue.value ?? 0));
 };
 const DEFAULT_LABEL_WIDTH_IN_PERCENT = 30;
@@ -127062,7 +127145,7 @@ const useInputIconSize = ({
       textStyleVariant: textStyle2.variant,
       defaultTextStyleVariant: DEFAULT_INPUT_TEXT_STYLE_VARIANT
     })
-  ) : DEFAULT_ICON_SIZE$1;
+  ) : DEFAULT_ICON_SIZE;
 };
 const useInputGroupStylingProps = (props2) => {
   const { theme } = useTheme$1();
@@ -127279,7 +127362,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       (padding2, iconPosition, iconSize) => {
         var _a2, _b2;
         let adjustedForIcon = {};
-        const horizontalPadding = iconSize ? iconSize + DEFAULT_ICON_SPACING : DEFAULT_ICON_SIZE$1;
+        const horizontalPadding = iconSize ? iconSize + DEFAULT_ICON_SPACING : DEFAULT_ICON_SIZE;
         if (iconPosition === "left") {
           adjustedForIcon = {
             left: Dim.px(horizontalPadding + (((_a2 = padding2.left) == null ? void 0 : _a2.value) ?? 0))
@@ -127365,7 +127448,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       );
     });
     __publicField(this, "passwordIconComponent", () => {
-      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE$1;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$4,
         {
@@ -127422,7 +127505,7 @@ const _InputComponent = class _InputComponent extends React__default.Component {
     });
     __publicField(this, "renderInputComponent", (inputType) => isNumericInput(inputType) ? this.numericInputComponent() : this.textInputComponent());
     __publicField(this, "renderIcon", () => {
-      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE$1;
+      const iconSize = this.props.iconSize ?? DEFAULT_ICON_SIZE;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
@@ -134989,7 +135072,7 @@ function requireButton() {
 }
 var buttonExports = /* @__PURE__ */ requireButton();
 const AntdButton = /* @__PURE__ */ getDefaultExportFromCjs(buttonExports);
-const StyledButton$1 = qe$1(AntdButton)`
+const StyledButton = qe$1(AntdButton)`
   color: ${(props2) => props2.color};
   ${({ $width }) => $width ? `width: ${$width}` : ""};
   ${({ $bordered }) => !$bordered ? "border: 0px;" : ""};
@@ -135004,7 +135087,7 @@ const Button$2 = memo(
   forwardRef(
     ({ bordered = true, width, children, ...buttonProps }, ref2) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledButton$1,
+        StyledButton,
         {
           $bordered: bordered,
           $width: width,
@@ -135785,8 +135868,7 @@ const RowDensity = {
 };
 const HorizontalAlignment = {
   left: "left",
-  right: "right",
-  center: "center"
+  right: "right"
 };
 const VerticalAlignment = {
   center: "center"
@@ -135903,7 +135985,7 @@ const PARSED_INPUT_TYPES = [
   EditInputType.Number,
   EditInputType.Checkbox
 ];
-const TextBoxEditTypes = [
+[
   EditInputType.Text,
   EditInputType.Number,
   EditInputType.Email
@@ -136005,15 +136087,26 @@ const tableColumnTypes = [
     value: ColumnType.EMAIL
   }
 ];
+const currentRowArg = (entity) => {
+  return {
+    name: "currentRow",
+    description: "Current row of the table. Use this to access the current row's data.",
+    type: "object",
+    schema: entity.tableData && Array.isArray(entity.tableData) && entity.tableData.length > 0 ? entity.tableData[0] : {}
+  };
+};
+const tableContextualArgs = function(entity) {
+  return [[currentRowArg(entity)]];
+};
 const cellIconProps = {
-  cellIcon: Prop.string().readAndWrite().propertiesPanel({
+  cellIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
     label: "Cell icon",
     controlType: "ICON_SELECTOR",
     isRemovable: true,
     visibility: "SHOW_NAME",
     defaultOnAdd: "info"
   }),
-  cellIconPosition: Prop.string().default("left").readAndWrite().propertiesPanel({
+  cellIconPosition: Prop.string().default("left").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
     label: "Cell icon position",
     controlType: "RADIO_BUTTON_GROUP",
     options: [
@@ -136030,7 +136123,7 @@ const cellIconProps = {
     ]
   })
 };
-const horizontalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
+const horizontalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
   label: "Horizontal alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -136039,7 +136132,7 @@ const horizontalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
     { value: "right", icon: "RIGHT_ALIGN" }
   ]
 }).default("left");
-const verticalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
+const verticalAlignProp = () => Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
   label: "Vertical alignment",
   controlType: "RADIO_BUTTON_GROUP",
   options: [
@@ -136050,7 +136143,7 @@ const verticalAlignProp = () => Prop.string().readAndWrite().propertiesPanel({
 }).default("center");
 const cellBackgroundProp = colorProp({
   label: "Background color"
-}).default(() => Theme.colors.neutral).readAndWrite();
+}).contextual(tableContextualArgs).default(() => Theme.colors.neutral).readAndWrite();
 const textStyleProps = {
   horizontalAlign: horizontalAlignProp(),
   verticalAlign: verticalAlignProp(),
@@ -136058,7 +136151,7 @@ const textStyleProps = {
     propertiesPanel: {
       label: "Cell text style"
     }
-  }).default(() => ({
+  }).contextual(tableContextualArgs).default(() => ({
     variant: DEFAULT_CELL_TEXT_STYLE_VARIANT
   })),
   cellBackground: cellBackgroundProp
@@ -136073,22 +136166,22 @@ const computedValueUnion = Prop.union({
     },
     {
       isDerived: Prop.literal(true),
-      computedValue: Prop.string().readAndWrite().propertiesPanel({
+      computedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Computed value"
-        // todo: add special control that can use currentRow
       })
     }
   ]
 }).getProps();
 const textColumnProperties = {
   general: {
-    displayedValue: Prop.string().readAndWrite().propertiesPanel({
+    displayedValue: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Displayed value",
       controlType: "COMPUTE_TABLE_VALUE"
     })
   },
   presentation: {
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    ...cellIconProps,
+    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136098,23 +136191,25 @@ const textColumnProperties = {
 const emailColumnProperties = { ...textColumnProperties };
 const buttonColumnProperties = {
   general: {
-    buttonLabel: Prop.string().default("Action").readAndWrite().propertiesPanel({
+    buttonLabel: Prop.string().default("Action").contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Button label",
       controlType: "COMPUTE_TABLE_VALUE"
     }),
-    isDisabled: Prop.boolean().readAndWrite().propertiesPanel({
+    isDisabled: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Disabled",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    buttonIcon: Prop.string().readAndWrite().propertiesPanel({
+    buttonIcon: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Button icon",
       controlType: "ICON_SELECTOR",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    buttonIconPosition: Prop.string().readAndWrite().default("left").propertiesPanel({
+    buttonIconPosition: Prop.string().readAndWrite().contextual(
+      tableContextualArgs
+    ).default("left").propertiesPanel({
       label: "Cell icon position",
       controlType: "RADIO_BUTTON_GROUP",
       options: [
@@ -136130,7 +136225,9 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonVariant: Prop.string().default("primary").readAndWrite().propertiesPanel({
+    buttonVariant: Prop.string().default("primary").contextual(
+      tableContextualArgs
+    ).readAndWrite().propertiesPanel({
       label: "Button variant",
       controlType: "DROP_DOWN",
       options: [
@@ -136148,7 +136245,9 @@ const buttonColumnProperties = {
         }
       ]
     }),
-    buttonTextStyle: textStyleProp().default(function() {
+    buttonTextStyle: textStyleProp().contextual(
+      tableContextualArgs
+    ).default(function() {
       return {
         variant: "buttonLabel",
         textColor: {
@@ -136166,28 +136265,32 @@ const buttonColumnProperties = {
       defaultOnAdd: function() {
         return getButtonThemeDefaultBackgroundColor(Theme, "primary");
       }
-    }).readAndWrite(),
+    }).contextual(
+      tableContextualArgs
+    ).readAndWrite(),
     buttonBorder: border({
       defaultOnAdd: SECONDARY_BUTTON_BORDER_OBJECT,
       treatDefaultAsNull: function() {
         return true;
       }
-    }).default(getDefaultBorderObject)
+    }).readAndWrite().contextual(
+      tableContextualArgs
+    ).default(getDefaultBorderObject)
   }
 };
 const numberColumnProperties = {
   general: {
-    notation: Prop.string().readAndWrite().propertiesPanel({
+    notation: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Number format",
       controlType: "DROP_DOWN",
       options: NUMBER_FORMATTING_OPTIONS
     }),
-    minimumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+    minimumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Minimum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
     }),
-    maximumFractionDigits: Prop.number().readAndWrite().propertiesPanel({
+    maximumFractionDigits: Prop.number().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Maximum fraction digits",
       isRemovable: true,
       visibility: "SHOW_NAME"
@@ -136195,7 +136298,7 @@ const numberColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136208,7 +136311,9 @@ const percentageColumnProperties = {
 };
 const currencyColumnProperties = {
   general: {
-    currency: Prop.string().default("USD").readAndWrite().propertiesPanel({
+    currency: Prop.string().default("USD").contextual(
+      tableContextualArgs
+    ).readAndWrite().propertiesPanel({
       label: "Currency",
       controlType: "DROP_DOWN",
       options: CurrencyList.map((currency) => ({
@@ -136222,12 +136327,11 @@ const currencyColumnProperties = {
 };
 const linkColumnProperties = {
   general: {
-    // todo: re-add when we have a way to access currentRow
-    // linkUrl: Prop.string().readAndWrite().propertiesPanel({
-    //   label: "Link URL",
-    //   controlType: "COMPUTE_TABLE_VALUE",
-    // }),
-    linkLabel: Prop.string().readAndWrite().propertiesPanel({
+    linkUrl: Prop.string().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
+      label: "Link URL",
+      controlType: "COMPUTE_TABLE_VALUE"
+    }),
+    linkLabel: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Link label",
       controlType: "COMPUTE_TABLE_VALUE"
     })
@@ -136243,13 +136347,15 @@ const linkColumnProperties = {
 };
 const imageColumnProperties = {
   general: {
-    openImageUrl: Prop.boolean().default(false).readAndWrite().propertiesPanel({
+    openImageUrl: Prop.boolean().contextual(tableContextualArgs).default(false).readAndWrite().propertiesPanel({
       label: "Open URL on click",
       controlType: "SWITCH"
     })
   },
   presentation: {
-    imageSize: Prop.string().readAndWrite().propertiesPanel({
+    imageSize: Prop.string().readAndWrite().contextual(
+      tableContextualArgs
+    ).propertiesPanel({
       label: "Image sizing",
       controlType: "DROP_DOWN",
       options: [
@@ -136275,14 +136381,14 @@ const imageColumnProperties = {
         }
       ]
     }),
-    imageBorderRadius: borderRadius(),
-    horizontalAlign: horizontalAlignProp(),
+    imageBorderRadius: borderRadius().contextual(tableContextualArgs),
+    horizontalAlign: horizontalAlignProp().contextual(tableContextualArgs),
     cellBackground: cellBackgroundProp
   }
 };
 const manageTimezoneUnion = Prop.union({
   shared: {
-    manageTimezone: Prop.boolean().default(false).readAndWrite().propertiesPanel({
+    manageTimezone: Prop.boolean().default(false).contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Manage timezone",
       controlType: "SWITCH"
     })
@@ -136293,12 +136399,12 @@ const manageTimezoneUnion = Prop.union({
     },
     {
       manageTimezone: Prop.literal(true),
-      valueTimezone: Prop.string().readAndWrite().propertiesPanel({
+      valueTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Value timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
       }),
-      displayTimezone: Prop.string().readAndWrite().propertiesPanel({
+      displayTimezone: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
         label: "Display timezone",
         controlType: "DROP_DOWN",
         options: TIMEZONE_OPTIONS
@@ -136308,12 +136414,12 @@ const manageTimezoneUnion = Prop.union({
 }).getProps();
 const dateColumnProperties = {
   general: {
-    inputFormat: Prop.string().readAndWrite().propertiesPanel({
+    inputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Value format",
       controlType: "DROP_DOWN",
       options: DATE_INPUT_FORMATS
     }),
-    outputFormat: Prop.string().readAndWrite().propertiesPanel({
+    outputFormat: Prop.string().contextual(tableContextualArgs).readAndWrite().propertiesPanel({
       label: "Display format",
       controlType: "DROP_DOWN",
       options: DATE_OUTPUT_FORMATS
@@ -136322,7 +136428,7 @@ const dateColumnProperties = {
   },
   presentation: {
     ...cellIconProps,
-    textWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    textWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Wrap text",
       controlType: "SWITCH"
     }),
@@ -136378,7 +136484,7 @@ const tagsColumnProperties = {
     horizontalAlign: horizontalAlignProp(),
     verticalAlign: verticalAlignProp(),
     cellBackground: cellBackgroundProp,
-    tagsWrap: Prop.boolean().readAndWrite().propertiesPanel({
+    tagsWrap: Prop.boolean().readAndWrite().contextual(tableContextualArgs).propertiesPanel({
       label: "Wrap tags",
       controlType: "SWITCH"
     }),
@@ -138428,7 +138534,9 @@ const ColumnHeaderWrapper = qe$1.div`
   gap: 4px;
   justify-content: ${(props2) => {
   var _a2, _b2;
-  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
+  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[getFirstPropertyValue(
+    (_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign
+  ) ?? HorizontalAlignment.left];
 }};
   align-items: center;
   overflow: hidden;
@@ -138443,7 +138551,9 @@ const HeaderCellContentWrapper = qe$1.div`
   flex: 1;
   justify-content: ${(props2) => {
   var _a2, _b2;
-  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[(_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign];
+  return ((_a2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _a2.horizontalAlign) && JUSTIFY_CONTENT[getFirstPropertyValue(
+    (_b2 = props2 == null ? void 0 : props2.columnProperties) == null ? void 0 : _b2.horizontalAlign
+  ) ?? HorizontalAlignment.left];
 }};
 `;
 const TableIconWrapper = qe$1.div`
@@ -145617,14 +145727,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BcutVQcb.js"
+            "./allPathsLoader-okzKZ8ZK.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-B6PtJR5E.js"
+            "./splitPathsBySizeLoader-DOjF2YSu.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -153457,7 +153567,7 @@ const getClearableIconRight = memoizeOne$1(
     }
     const iconPadding = getIconPadding(
       inputPadding == null ? void 0 : inputPadding.right,
-      iconSize ?? DEFAULT_ICON_SIZE$1,
+      iconSize ?? DEFAULT_ICON_SIZE,
       false
     );
     return iconPadding.value;
@@ -153971,7 +154081,7 @@ class DatePickerComponent extends React__default.Component {
                                   DynamicSVG,
                                   {
                                     iconName: this.props.icon,
-                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE$1
+                                    size: this.props.iconSize ?? DEFAULT_ICON_SIZE
                                   }
                                 )
                               }
@@ -154004,258 +154114,6 @@ class DatePickerComponent extends React__default.Component {
     );
   }
 }
-const DEFAULT_ICON_SIZE = 18;
-const DropdownEntireObjectOption$1 = "$$ENTIRE_OBJECT";
-const INVALID_LABEL_MSG = "Invalid label, should be a string";
-const extractDropdownOptions = (options, transformation) => {
-  let opts = options;
-  if (!Array.isArray(options)) {
-    opts = [options];
-  }
-  let defaultLabelKey;
-  const useEntireObjectAsValue = (transformation == null ? void 0 : transformation.value) === DropdownEntireObjectOption$1;
-  const optionWithDefaultKey = (option) => {
-    var _a2;
-    if (defaultLabelKey) {
-      return {
-        label: typeof option[defaultLabelKey] === "object" ? INVALID_LABEL_MSG : option[defaultLabelKey],
-        value: option
-      };
-    } else {
-      defaultLabelKey = (_a2 = Object.keys(option).sort()) == null ? void 0 : _a2[0];
-      return {
-        label: typeof option[defaultLabelKey] === "object" ? INVALID_LABEL_MSG : option[defaultLabelKey],
-        value: option
-      };
-    }
-  };
-  return opts.map((option) => {
-    if (!option) {
-      return null;
-    }
-    if (typeof option !== "object") {
-      return { label: option, value: option };
-    }
-    if (transformation) {
-      if (option[transformation.label] == null || !useEntireObjectAsValue && option[transformation.value] == null) {
-        return optionWithDefaultKey(option);
-      }
-      return {
-        label: typeof option[transformation.label] === "object" ? INVALID_LABEL_MSG : option[transformation.label],
-        value: useEntireObjectAsValue ? option : option[transformation.value]
-      };
-    }
-    if (option.label == null || option.value == null) {
-      return optionWithDefaultKey(option);
-    }
-    return option;
-  }).filter((opt) => opt && opt.value != null && opt.label != null);
-};
-const CellStyle = Ae$1`
-  border-radius: 4px;
-  z-index: 3;
-  ${({ $position }) => {
-  return Ae$1`
-      width: ${($position == null ? void 0 : $position.width) ? ($position == null ? void 0 : $position.width) - 2 : ""}px;
-    `;
-}};
-  box-shadow:
-    0px 0px 1px rgba(27, 30, 34, 0.24),
-    0px 1px 3px rgba(27, 30, 34, 0.12),
-    0px 12px 24px rgba(27, 30, 34, 0.12);
-  .bp5-control-group:not(.bp5-vertical) > *:not(.bp5-divider) {
-    margin-right: 0px;
-  }
-  .bp5-control-group {
-    // TODO(wylie): Follow the instructions here for removing .bp5-popover-wrapper
-    // https://github.com/palantir/blueprint/wiki/Popover2-migration
-    .bp5-input-group::before {
-      top: 2px;
-      height: 100%;
-    }
-  }
-  &&& {
-    .bp5-input,
-    .bp5-multi-select {
-      border: none !important; // blueprint border style is important, need to override
-      .bp5-tag-input-values {
-        margin-top: 0px;
-      }
-    }
-  }
-
-  &&&&& {
-    .bp5-tag {
-      margin-top: 1px;
-    }
-  }
-
-  position: absolute;
-  top: 0px;
-  left: 0px;
-`;
-const InputCellWrapper = qe$1.div`
-  ${CellStyle}
-  position: absolute;
-  top: 0;
-  left: 0;
-  &&&&& {
-    textarea {
-      padding-top: 0px;
-      padding-bottom: 0px;
-    }
-    input {
-      ${(props2) => {
-  var _a2, _b2;
-  const height = ((_a2 = props2.$position) == null ? void 0 : _a2.height) != null ? (_b2 = props2.$position) == null ? void 0 : _b2.height : 0;
-  if (height) {
-    return `height: ${height}px;`;
-  }
-}}
-    }
-    textarea,
-    input {
-      padding-left: 10px;
-      min-height: ${({ $position, $rowDensity }) => {
-  const minHeight = ($position == null ? void 0 : $position.height) != null ? ($position == null ? void 0 : $position.height) - TABLE_SIZES[$rowDensity].ROW_PADDING * 2 : 0;
-  return `${minHeight}px`;
-}};
-      text-align: ${(props2) => {
-  var _a2;
-  if ((_a2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _a2.horizontalAlign) {
-    return TEXT_ALIGN[props2.cellProperties.horizontalAlign];
-  }
-}};
-      font-size: ${(props2) => {
-  return `${TABLE_SIZES[props2.$rowDensity].ROW_FONT_SIZE}px`;
-}};
-      line-height: 1.5;
-      border: none;
-      &:focus {
-        border: none;
-        box-shadow: none;
-      }
-    }
-  }
-`;
-const DropdownCellWrapper = qe$1.div`
-  ${CellStyle};
-  height: 100%;
-  .${CONTROL_GROUP} {
-    height: 100%;
-  }
-
-  &&&&& .${POPOVER_OPEN$1} input {
-    ${({ clearable }) => clearable && "padding-right: 50px"}
-  }
-
-  .dropdown-wrapper {
-    height: 100%;
-    *:not(.${CLASS_NAMES.DROPDOWN_CLEAR_ICON}) {
-      height: 100%;
-    }
-    .${CLASS_NAMES.INPUT}::before {
-      top: calc(50% + 1px);
-      transform: translateY(-50%);
-      height: ${DEFAULT_ICON_SIZE}px;
-    }
-
-    input {
-      height: 100%;
-    }
-  }
-`;
-const DateCellWrapper = qe$1(DropdownCellWrapper)`
-  ${CellStyle}
-  height: 100%;
-  .${CONTROL_GROUP} {
-    height: 100%;
-  }
-  .${POPOVER_TARGET$1} {
-    height: 100%;
-    * {
-      height: 100%;
-    }
-  }
-  &&&&& {
-    input {
-      height: 100%;
-      min-height: 100%;
-      top: 0px;
-      padding-top: 0px;
-      padding-bottom: 0px;
-    }
-  }
-`;
-const EditDateCell = (props2) => {
-  const { value, editProps, inputPosition } = props2;
-  const { handleEditStop, editMinDate, editMaxDate, editTwentyFourHourTime } = editProps;
-  const {
-    inputFormat,
-    outputFormat,
-    timezone,
-    manageTimezone,
-    displayTimezone
-  } = props2.cellProps;
-  const [date4, setDate2] = useState(value);
-  const [closed, setClosed] = useState(false);
-  const handleDateChange = useCallback(
-    (date22) => {
-      setDate2(date22);
-    },
-    [setDate2]
-  );
-  const handleDatepickerClose = useCallback(() => {
-    if (closed) return;
-    setClosed(true);
-    handleEditStop({ shouldSave: true, value: date4, validationErrors: [] });
-  }, [handleEditStop, closed, date4]);
-  useEffect(() => {
-    return () => {
-      handleEditStop({ shouldSave: false });
-    };
-  }, []);
-  const formattedMinDate = useMemo$2(() => {
-    if (editMinDate) {
-      return hooks(editMinDate, ISO_DATE_FORMAT).format(ISO_DATE_FORMAT);
-    }
-  }, [editMinDate]);
-  const formattedMaxDate = useMemo$2(() => {
-    if (editMaxDate) {
-      return hooks(editMaxDate, ISO_DATE_FORMAT).format(ISO_DATE_FORMAT);
-    }
-  }, [editMaxDate]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DateCellWrapper,
-    {
-      $position: inputPosition,
-      $rowDensity: props2.rowDensity,
-      cellProperties: props2.cellProps.cellProperties,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        DatePickerComponent,
-        {
-          label: "",
-          dateFormat: inputFormat,
-          displayDateFormat: outputFormat,
-          datePickerType: DatePickerType.DATE_PICKER,
-          onDateSelected: handleDateChange,
-          isLoading: false,
-          isDisabled: false,
-          selectedDate: date4,
-          forceOpen: true,
-          onDatePickerClosed: handleDatepickerClose,
-          use24HourTime: editTwentyFourHourTime ?? true,
-          minDate: formattedMinDate,
-          maxDate: formattedMaxDate,
-          timezone: manageTimezone ? timezone : void 0,
-          displayTimezone: manageTimezone ? displayTimezone : void 0,
-          showTimezone: false,
-          errorMessagePlacement: "tooltip"
-        }
-      )
-    }
-  );
-};
 function usePointerDownOutside({
   wrapperRefs,
   wrapperIds,
@@ -154302,385 +154160,6 @@ function usePointerDownOutside({
     };
   }, [wrapperRefs, wrapperIds, wrapperSelectors, onClickOutside]);
 }
-const EditInputCell = (props2) => {
-  var _a2, _b2, _c2;
-  const { value, editProps, targetCellRef, inputPosition } = props2;
-  const {
-    handleEditStop,
-    editInputType,
-    editCustomValidationRule,
-    editCustomErrorMessage,
-    editMaxLength,
-    editMinLength,
-    editIsRequired,
-    handleEditChange
-  } = editProps;
-  const [inputValue, setInputValue] = useState(
-    typeof value === "object" && value ? JSON.stringify(value, null, 2) : value
-  );
-  const inputMemo = useRef(inputValue);
-  const [validationErrors, setValidationErrors] = useState([]);
-  const inputWrapperRef = useRef(null);
-  const validateValue = useCallback(
-    (toValidate) => {
-      const errors2 = getInputValidationErrors({
-        inputType: editInputType ?? "TEXT",
-        text: String(toValidate ?? ""),
-        emailRegex: new RegExp(`^${EmailRegexString}$`),
-        customValidationRule: String(editCustomValidationRule),
-        customErrorMessage: editCustomErrorMessage,
-        maxLength: editMaxLength,
-        minLength: editMinLength,
-        isRequired: editIsRequired ?? false
-      });
-      const validationErrors2 = getErrorMessages(errors2);
-      setValidationErrors(validationErrors2);
-      return validationErrors2;
-    },
-    [
-      editInputType,
-      editCustomValidationRule,
-      editCustomErrorMessage,
-      editMaxLength,
-      editMinLength,
-      editIsRequired
-    ]
-  );
-  useEffect(() => {
-    validateValue(inputMemo.current);
-  }, [validateValue]);
-  const debouncedValidation = c(validateValue, 50);
-  const handleValueChange = useCallback(
-    (val) => {
-      setInputValue(val);
-      inputMemo.current = val;
-      handleEditChange(val);
-      debouncedValidation(val);
-    },
-    [debouncedValidation, handleEditChange]
-  );
-  const handleKeyDown = useCallback(
-    (e3) => {
-      if (e3.key === "Enter") {
-        e3.preventDefault();
-        const errors2 = validateValue(inputMemo.current);
-        handleEditStop({
-          shouldSave: true,
-          value: inputMemo.current,
-          validationErrors: errors2
-        });
-      }
-      if (e3.key !== "Tab" && e3.key !== "Escape" && e3.key !== "Enter") {
-        e3.stopPropagation();
-      }
-    },
-    [handleEditStop, validateValue]
-  );
-  const saveChange = useCallback(() => {
-    handleEditStop({
-      shouldSave: true,
-      value: inputValue,
-      validationErrors
-    });
-  }, [handleEditStop, inputValue, validationErrors]);
-  usePointerDownOutside({
-    wrapperRefs: [inputWrapperRef],
-    wrapperSelectors: ["[data-test=table-edit-input]"],
-    onClickOutside: saveChange
-  });
-  useEffect(() => {
-    return () => {
-      handleEditStop({ shouldSave: false });
-    };
-  }, []);
-  if (!targetCellRef.current || typeof (inputPosition == null ? void 0 : inputPosition.top) === "undefined" || // Validate that the intended element exists
-  !((_c2 = (_b2 = (_a2 = targetCellRef.current.childNodes) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.getAttribute) == null ? void 0 : _c2.call(
-    _b2,
-    "data-superblocks"
-  ))) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Popper,
-    {
-      targetNode: targetCellRef.current.childNodes[0],
-      isOpen: true,
-      placement: "auto",
-      useDefaultModifiers: false,
-      zIndex: 1,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        InputCellWrapper,
-        {
-          "data-test": `table-edit-input`,
-          $position: inputPosition,
-          $rowDensity: props2.rowDensity,
-          cellProperties: props2.cellProps.cellProperties,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              value: inputValue,
-              onChange: handleValueChange,
-              onKeyDown: handleKeyDown
-            }
-          )
-        }
-      )
-    }
-  );
-};
-const EditMultiSelectCell = (props2) => {
-  const dropdownRef = useRef(null);
-  const { editProps, inputPosition, cellProps } = props2;
-  const {
-    currentEditValue,
-    handleEditStop,
-    handleEditChange,
-    editIsRequired,
-    editOptions = [],
-    transformation,
-    onDropdownSearchTextChanged
-    // editDropdownClientSideFiltering,
-    // currentEditDropdownSearchText,
-    // dropdownOptionsLoading,
-  } = editProps;
-  const selectedOptions = useMemo$2(() => {
-    return Array.isArray(currentEditValue) ? currentEditValue : currentEditValue != null ? [currentEditValue] : [];
-  }, [currentEditValue]);
-  const transformedEditOptions = useMemo$2(() => {
-    return extractDropdownOptions(editOptions, transformation);
-  }, [editOptions, transformation]);
-  useMemo$2(() => {
-    return selectedOptions ? selectedOptions.map((o) => lodashExports.findIndex(transformedEditOptions, { value: o })).filter((ind) => ind !== -1) : [];
-  }, [selectedOptions, transformedEditOptions]);
-  useCallback(
-    (selectedOption) => {
-      if (selectedOption) {
-        const isAlreadySelected = selectedOptions.includes(
-          selectedOption.value
-        );
-        if (!isAlreadySelected) {
-          handleEditChange(
-            [...selectedOptions, selectedOption.value],
-            [
-              {
-                label: selectedOption.label,
-                value: JSON.stringify(selectedOption.value)
-              }
-            ]
-          );
-        } else {
-          handleEditChange(
-            selectedOptions.filter(
-              (opt) => opt !== selectedOption.value,
-              [selectedOption]
-            )
-          );
-        }
-      }
-    },
-    [handleEditChange, selectedOptions]
-  );
-  useCallback(
-    (removedIndex) => {
-      const newSelectedValues = selectedOptions.filter(
-        (value) => lodashExports.findIndex(transformedEditOptions, { value }) !== removedIndex
-      );
-      handleEditChange(newSelectedValues);
-    },
-    [handleEditChange, selectedOptions, transformedEditOptions]
-  );
-  useCallback(
-    (options) => {
-      handleEditChange(
-        options.map(({ value }) => value),
-        options.map((val) => ({ ...val, value: JSON.stringify(val.value) }))
-      );
-    },
-    [handleEditChange]
-  );
-  useCallback(
-    (query) => {
-      onDropdownSearchTextChanged == null ? void 0 : onDropdownSearchTextChanged(query);
-    },
-    [onDropdownSearchTextChanged]
-  );
-  const handleDropdownClose = useCallback(() => {
-    const validationErrors = selectedOptions.length === 0 && editIsRequired ? ["This field is required"] : [];
-    handleEditStop({
-      shouldSave: true,
-      value: selectedOptions,
-      validationErrors
-    });
-  }, [handleEditStop, selectedOptions, editIsRequired]);
-  usePointerDownOutside({
-    onClickOutside: handleDropdownClose,
-    wrapperRefs: [dropdownRef],
-    wrapperSelectors: [".bp5-multi-select-popover"]
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DropdownCellWrapper,
-    {
-      $position: inputPosition,
-      $rowDensity: props2.rowDensity,
-      ref: dropdownRef,
-      cellProperties: cellProps.cellProperties
-    }
-  );
-};
-const EditSingleSelectCell = (props2) => {
-  const { value, editProps, inputPosition } = props2;
-  const {
-    handleEditStop,
-    // editIsRequired,
-    editOptions = [],
-    transformation,
-    onDropdownSearchTextChanged,
-    editDropdownClientSideFiltering,
-    // currentEditDropdownSearchText,
-    // dropdownOptionsLoading,
-    allowClearing
-  } = editProps;
-  const transformedEditOptions = useMemo$2(() => {
-    return extractDropdownOptions(editOptions, transformation);
-  }, [editOptions, transformation]);
-  useMemo$2(() => {
-    return transformedEditOptions.findIndex((opt) => opt.value === value);
-  }, [value, transformedEditOptions]);
-  useCallback(
-    (val) => {
-      handleEditStop({
-        shouldSave: true,
-        value: val == null ? void 0 : val.value,
-        validationErrors: [],
-        dropdownOption: {
-          ...val,
-          value: (val == null ? void 0 : val.value) ? JSON.stringify(val == null ? void 0 : val.value) : ""
-        }
-      });
-    },
-    [handleEditStop]
-  );
-  useCallback(
-    (query) => {
-      onDropdownSearchTextChanged == null ? void 0 : onDropdownSearchTextChanged(query);
-    },
-    [onDropdownSearchTextChanged]
-  );
-  useEffect(() => {
-    return () => {
-      if (editDropdownClientSideFiltering) {
-        handleEditStop({ shouldSave: false });
-      }
-    };
-  }, [editDropdownClientSideFiltering]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    DropdownCellWrapper,
-    {
-      $rowDensity: props2.rowDensity,
-      cellProperties: props2.cellProps.cellProperties,
-      $position: inputPosition,
-      clearable: allowClearing
-    }
-  );
-};
-const useGetInputPosition = (tableEl, cellEl) => {
-  const firstRender = useRef(true);
-  const [tableRect, setTableRect] = useState();
-  const [cellRect, setCellRect] = useState();
-  const measureTable = useCallback(() => {
-    if (tableEl) {
-      setTableRect(tableEl.getBoundingClientRect());
-    }
-  }, [tableEl]);
-  const measureCell = useCallback(() => {
-    if (cellEl) {
-      setCellRect(cellEl.getBoundingClientRect());
-    }
-  }, [cellEl]);
-  const measureCellAndTable = useCallback(() => {
-    measureCell();
-    measureTable();
-  }, [measureCell, measureTable]);
-  const debouncedMeasureCellAndTable = c(
-    measureCellAndTable,
-    10
-  );
-  const debouncedMeasureCell = c(measureCell, 10);
-  useLayoutEffect$2(measureTable, [measureTable]);
-  useLayoutEffect$2(measureCell, [measureCell]);
-  if (firstRender.current) {
-    firstRender.current = false;
-    measureTable();
-    measureCell();
-  }
-  useEffect(() => {
-    if (debouncedMeasureCell) {
-      tableEl == null ? void 0 : tableEl.addEventListener("scroll", debouncedMeasureCell);
-    }
-    return () => {
-      if (debouncedMeasureCell) {
-        tableEl == null ? void 0 : tableEl.removeEventListener("scroll", debouncedMeasureCell);
-      }
-    };
-  }, [tableEl, debouncedMeasureCell]);
-  useResizeObserver(
-    tableEl,
-    debouncedMeasureCellAndTable ?? measureCellAndTable
-  );
-  useResizeObserver(cellEl, debouncedMeasureCell ?? measureCell);
-  const top2 = cellRect && tableRect && tableEl ? cellRect.top - tableRect.top + tableEl.scrollTop : void 0;
-  const left2 = cellRect && tableRect && tableEl ? cellRect.left - tableRect.left + tableEl.scrollLeft : void 0;
-  return {
-    width: (cellRect == null ? void 0 : cellRect.width) && left2 === 0 ? (cellRect == null ? void 0 : cellRect.width) - 10 : cellRect == null ? void 0 : cellRect.width,
-    height: cellRect == null ? void 0 : cellRect.height,
-    top: top2,
-    left: left2 === 0 ? 10 : left2,
-    maxHeight: tableRect && top2 ? (tableRect == null ? void 0 : tableRect.height) - top2 : void 0
-  };
-};
-const EditCell = (props2) => {
-  var _a2;
-  const tableRef = useRef(
-    document == null ? void 0 : document.querySelector(
-      `[data-test=table-component-${props2.tableName}] tbody`
-    )
-  );
-  const inputPosition = useGetInputPosition(
-    tableRef == null ? void 0 : tableRef.current,
-    (_a2 = props2.targetCellRef) == null ? void 0 : _a2.current
-  );
-  const propsToPass = useMemo$2(() => {
-    return {
-      editProps: props2.editProps,
-      value: props2.value,
-      rowDensity: props2.rowDensity,
-      cellProps: props2.cellProps,
-      inputPosition,
-      theme: props2.theme
-    };
-  }, [
-    inputPosition,
-    props2.cellProps,
-    props2.rowDensity,
-    props2.editProps,
-    props2.value,
-    props2.theme
-  ]);
-  switch (props2.editProps.editInputType) {
-    case EditInputType.Dropdown:
-      if (props2.editProps.editMultiSelect) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(EditMultiSelectCell, { ...propsToPass });
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditSingleSelectCell, { ...propsToPass });
-    case EditInputType.Date:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditDateCell, { ...propsToPass });
-    case EditInputType.Email:
-    case EditInputType.Number:
-    case EditInputType.Text:
-    default:
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(EditInputCell, { ...propsToPass, targetCellRef: props2.targetCellRef });
-  }
-};
 const CheckboxInput = ({
   isChecked,
   isDisabled,
@@ -154731,279 +154210,6 @@ const CheckboxInput = ({
     }
   );
 };
-const StyledCellWrapper = qe$1(CellWrapper)`
-  ${(props2) => {
-  var _a2, _b2;
-  return ((_a2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _a2.horizontalAlign) === HorizontalAlignment.right ? "padding-right: 10px;" : ((_b2 = props2 == null ? void 0 : props2.cellProperties) == null ? void 0 : _b2.horizontalAlign) === HorizontalAlignment.center ? "padding-left: 19px;" : "";
-}};
-
-  > div {
-    width: unset !important;
-  }
-
-  .checkbox-container {
-    display: none;
-  }
-
-  .read-mode-component {
-    display: flex;
-  }
-
-  &[data-is-focused="true"] {
-    .read-mode-component {
-      display: none;
-    }
-
-    .checkbox-container {
-      display: flex;
-    }
-  }
-
-  &:hover:not([data-is-focused="true"]) {
-    .read-mode-component {
-      display: none;
-    }
-
-    .checkbox-container {
-      display: flex;
-    }
-  }
-`;
-const EditCheckboxCell = (props2) => {
-  var _a2;
-  const {
-    value,
-    editProps,
-    readModeComponent,
-    isFocused: propsIsFocused
-  } = props2;
-  const { handleOneClickEdit } = editProps;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    StyledCellWrapper,
-    {
-      rowDensity: props2.rowDensity,
-      cellProperties: props2.cellProperties,
-      "data-is-focused": propsIsFocused,
-      "data-test": `edit-checkbox-active-${value}`,
-      style: {
-        height: ((_a2 = TABLE_SIZES == null ? void 0 : TABLE_SIZES[props2.rowDensity]) == null ? void 0 : _a2.ROW_HEIGHT) - 8
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: "read-mode-component",
-            "data-test": `edit-checkbox-${value}`,
-            style: {
-              height: "100%",
-              alignItems: "center"
-            },
-            children: readModeComponent
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          CheckboxInput,
-          {
-            isChecked: value,
-            isValid: true,
-            isDisabled: false,
-            onClick: handleOneClickEdit
-          }
-        )
-      ]
-    }
-  );
-};
-const LinkLike = qe$1.div`
-  cursor: pointer;
-`;
-const IconStyles = Ae$1`
-  height: ${({ rowDensity }) => {
-  var _a2;
-  return ((_a2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _a2.LINK_MENU_HEIGHT) ?? 32;
-}}px;
-  padding: ${({ rowDensity }) => rowDensity === RowDensity["extra-small"] ? "7px" : rowDensity === RowDensity.small ? "9px" : "10px"};
-`;
-const StyledButton = qe$1(Button$5)`
-  border: none;
-  ${IconStyles}
-`;
-const LinkMenu = qe$1.div`
-  display: flex;
-  align-items: center;
-  a {
-    ${IconStyles}
-  }
-
-  svg > path {
-    fill: none !important;
-  }
-`;
-const OpenLinkButton = ({
-  url: url2,
-  openInNewTab,
-  rowDensity
-}) => {
-  var _a2, _b2, _c2, _d2;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$2, { title: "Open", children: openInNewTab === void 0 || openInNewTab === true ? (
-    // todo laura: ask omar about how linking should work
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "a",
-      {
-        href: url2,
-        target: "_blank",
-        "aria-disabled": true,
-        "data-test": "table-cell-link-open",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SvgExternalLink,
-          {
-            style: {
-              height: ((_a2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _a2.LINK_MENU_ICON_SIZE) ?? 16,
-              width: ((_b2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _b2.LINK_MENU_ICON_SIZE) ?? 16
-            }
-          }
-        )
-      }
-    )
-  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-    PlainLink,
-    {
-      href: url2,
-      rel: "noreferrer nofollow",
-      target: "_parent",
-      "data-test": "table-cell-link-open",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        SvgExternalLink,
-        {
-          style: {
-            height: ((_c2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _c2.LINK_MENU_ICON_SIZE) ?? 16,
-            width: ((_d2 = TABLE_SIZES[rowDensity]) == null ? void 0 : _d2.LINK_MENU_ICON_SIZE) ?? 16
-          }
-        }
-      )
-    }
-  ) });
-};
-const EditableLinkCell = (props2) => {
-  const {
-    isHidden: isHidden2,
-    url: url2,
-    label,
-    openInNewTab,
-    isEdited,
-    value,
-    cellProperties,
-    rowDensity,
-    isFocused,
-    defaultValue: defaultValue2,
-    maxLinesPerRow,
-    isMultiselecting
-  } = props2;
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const cellRef = useRef(null);
-  const popperRef = useRef(null);
-  useEffect(() => {
-    if (isMenuOpen && !isFocused) {
-      setIsMenuOpen(false);
-    } else if (!isMenuOpen && isFocused) {
-      setIsMenuOpen(true);
-    }
-  }, [isFocused, isMenuOpen]);
-  const { cellTextStyle, horizontalAlign, verticalAlign, textWrap } = cellProperties;
-  const [className, styles] = useMemo$2(() => {
-    const options = {
-      canWrap: textWrap,
-      maxLines: maxLinesPerRow
-    };
-    return [
-      getCellClass(options),
-      {
-        ...getCellWrapStyles(options),
-        ...buildCellStyles({
-          cellTextStyle,
-          horizontalAlign,
-          verticalAlign
-        })
-      }
-    ];
-  }, [textWrap, maxLinesPerRow, cellTextStyle, horizontalAlign, verticalAlign]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    CellWrapper,
-    {
-      ref: cellRef,
-      isHidden: isHidden2,
-      cellProperties,
-      rowDensity,
-      className,
-      style: styles,
-      children: [
-        !value && defaultValue2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultValueWrapper, { children: defaultValue2 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-          LinkLike,
-          {
-            style: {
-              height: "100%",
-              display: "flex",
-              alignItems: "center"
-            },
-            className: CLASS_NAMES.LINK,
-            children: isEdited ? value : label
-          }
-        ),
-        isMenuOpen && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Popper,
-          {
-            zIndex: 3,
-            isOpen: isMenuOpen,
-            targetNode: cellRef.current || void 0,
-            placement: "bottom-start",
-            ref: popperRef,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              LinkMenu,
-              {
-                "data-test": "table-cell-link-menu",
-                rowDensity,
-                className: CLASS_NAMES.POPOVER_WRAPPER,
-                style: isMultiselecting ? {
-                  display: "none"
-                } : void 0,
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$2, { title: "Copy", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    StyledButton,
-                    {
-                      rowDensity,
-                      onClick: () => {
-                        copy$1(url2);
-                      },
-                      "data-test": "table-cell-link-copy",
-                      type: "link",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        SvgCopy,
-                        {
-                          style: {
-                            height: 16,
-                            width: 16
-                          }
-                        }
-                      )
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    OpenLinkButton,
-                    {
-                      url: url2,
-                      openInNewTab,
-                      rowDensity
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
 var lib = {};
 var players = {};
 var utils = {};
@@ -161288,7 +160494,7 @@ const formatByType = (value, type5, options) => {
       return text;
   }
 };
-const StyledEditableDiv = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
@@ -161312,20 +160518,20 @@ const StyledEditableDiv = qe$1.div`
     }
   }
 `;
-const EditableCellWrapper = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   padding: 0px;
 `;
-const StyledCheckmarkWrapper = qe$1.div`
+qe$1.div`
   position: relative;
   height: 100%;
   width: 100%;
   border-radius: 4px;
   overflow: hidden;
 `;
-const EditMarker = qe$1.div`
+qe$1.div`
   position: absolute;
   top: 0px;
   left: 0px;
@@ -161334,180 +160540,17 @@ const EditMarker = qe$1.div`
   border-style: solid;
   border-width: 10px 10px 0 0;
 `;
-const StyledChevronDown = qe$1(SvgChevronDown)`
+qe$1(SvgChevronDown)`
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   visibility: hidden;
 `;
-const EditingCellWrapper = qe$1.div`
+qe$1.div`
   width: 100%;
   height: 100%;
   position: relative;
 `;
-const EditableCell = (props2) => {
-  const cellRef = useRef(null);
-  const { theme } = props2;
-  const {
-    validationErrors,
-    isEdited,
-    isEditFocused,
-    handleEditStart,
-    editInputType
-  } = props2.editProps;
-  const isDropdownType = editInputType === EditInputType.Dropdown || editInputType === EditInputType.Date;
-  const onEditableCellClick = useCallback(() => {
-    if (!isEditFocused && isDropdownType) {
-      handleEditStart();
-    }
-  }, [isEditFocused, isDropdownType, handleEditStart]);
-  const onEditableCellDoubleClick = useCallback(
-    (e3) => {
-      if (!isEditFocused && !isDropdownType) {
-        e3.stopPropagation();
-        handleEditStart();
-      }
-    },
-    [handleEditStart, isDropdownType, isEditFocused]
-  );
-  if (editInputType === EditInputType.Checkbox) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(EditableCellWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledCheckmarkWrapper, { className: "editable-cell", children: [
-      isEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        EditMarker,
-        {
-          style: {
-            borderColor: `${theme.colors.primary500} transparent transparent transparent`,
-            top: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0,
-            left: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        EditCheckboxCell,
-        {
-          editProps: props2.editProps,
-          value: props2.rawValue,
-          rowDensity: props2.rowDensity,
-          cellProperties: props2.cellProps.cellProperties,
-          isFocused: props2.cellProps.isFocused,
-          readModeComponent: renderCell({
-            value: props2.value,
-            columnType: props2.columnType,
-            cellProps: props2.cellProps,
-            position: props2.position,
-            theme
-          })
-        }
-      )
-    ] }) });
-  }
-  if (isEditFocused) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(EditingCellWrapper, { ref: cellRef, className: "editing-cell-wrapper", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          "data-superblocks": "table-editor",
-          style: { position: "absolute", top: 0, left: 0 }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: "hidden" }, children: renderCell({
-        value: props2.value,
-        columnType: props2.columnType,
-        cellProps: props2.cellProps,
-        position: props2.position,
-        maxLinesPerRow: props2.maxLinesPerRow,
-        theme
-      }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        EditCell,
-        {
-          targetCellRef: cellRef,
-          editProps: props2.editProps,
-          value: props2.editProps.editInputType && TextBoxEditTypes.includes(
-            props2.editProps.editInputType
-          ) ? props2.editProps.currentEditValue : props2.rawValue,
-          tableName: props2.tableName,
-          rowDensity: props2.rowDensity,
-          cellProps: props2.cellProps,
-          theme
-        }
-      )
-    ] });
-  }
-  const { linkUrl, linkLabel, openInNewTab } = props2.cellProps.cellProperties;
-  const defaultValue2 = props2.isInserted ? `Set ${props2.columnName}...` : "";
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    EditableCellWrapper,
-    {
-      onClick: onEditableCellClick,
-      onDoubleClick: onEditableCellDoubleClick,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        StyledEditableDiv,
-        {
-          $isValid: validationErrors.length === 0,
-          "data-test": props2.columnType === "link" ? `editable-link-${props2.tableName}-${props2.value}` : `editable-cell-${props2.tableName}-${props2.value}`,
-          className: `editable-cell ${isDropdownType ? "dropdown-preview" : ""}`,
-          "data-align": props2.cellProps.cellProperties.verticalAlign,
-          hoverColor: theme.colors.neutral,
-          style: {
-            borderRadius: styleFromDimension(theme.defaultBorder.borderRadius),
-            ...validationErrors.length === 0 ? {} : {
-              border: generateBorderStyle(theme.defaultBorder),
-              borderColor: theme.colors.danger
-            }
-          },
-          children: [
-            isEdited && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              EditMarker,
-              {
-                style: {
-                  borderColor: `${theme.colors.primary500} transparent transparent transparent`,
-                  top: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0,
-                  left: (theme.defaultBorder.borderRadius.value ?? 0) > 8 ? 2 : 0
-                }
-              }
-            ),
-            props2.columnType === "link" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              EditableLinkCell,
-              {
-                url: linkUrl ?? "",
-                label: linkLabel ?? linkUrl ?? "",
-                openInNewTab,
-                isHidden: props2.cellProps.isHidden,
-                isEdited,
-                value: props2.rawValue,
-                cellProperties: props2.cellProps.cellProperties,
-                rowDensity: props2.rowDensity,
-                isFocused: props2.cellProps.isFocused,
-                position: props2.position,
-                defaultValue: defaultValue2,
-                maxLinesPerRow: props2.maxLinesPerRow,
-                isMultiselecting: props2.cellProps.isMultiselecting
-              }
-            ) : renderCell({
-              value: props2.value,
-              columnType: props2.columnType,
-              editInputType: props2.editProps.editInputType,
-              cellProps: props2.cellProps,
-              position: props2.position,
-              defaultValue: defaultValue2,
-              maxLinesPerRow: props2.maxLinesPerRow,
-              theme
-            }),
-            (editInputType === EditInputType.Dropdown || editInputType === EditInputType.Date) && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              StyledChevronDown,
-              {
-                style: {
-                  color: theme.colors.neutral300
-                }
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
 const getCellClassAndStyleMemo = lodashExports.memoize(
   (canWrap, maxLines, cellTextStyle, horizontalAlign, verticalAlign) => {
     const options = {
@@ -161529,18 +160572,13 @@ const getCellClassAndStyleMemo = lodashExports.memoize(
   // Custom resolver to create a unique key based on nested properties
   (...args) => JSON.stringify(args)
 );
-function getCellProperties(tableCellTextStyle, columnProperties, rowIndex) {
-  var _a2, _b2, _c2, _d2, _e2, _f2;
-  const cellTextStyleVariant = getPropertyValue(
-    (_b2 = (_a2 = columnProperties.cellProps) == null ? void 0 : _a2.textStyle) == null ? void 0 : _b2.variant,
-    rowIndex
-  );
-  const cellTextStyleColor = getPropertyValue(
-    (_e2 = (_d2 = (_c2 = columnProperties.cellProps) == null ? void 0 : _c2.textStyle) == null ? void 0 : _d2.textColor) == null ? void 0 : _e2.default,
-    rowIndex
-  );
+function getCellProperties(tableCellTextStyle, columnProperties, currentRow = {}) {
+  var _a2, _b2, _c2;
+  const cellProps = getPropertyValue(columnProperties.cellProps, currentRow);
+  const cellTextStyleColor = (_b2 = (_a2 = cellProps == null ? void 0 : cellProps.textStyle) == null ? void 0 : _a2.textColor) == null ? void 0 : _b2.default;
+  const cellTextStyleVariant = (_c2 = cellProps == null ? void 0 : cellProps.textStyle) == null ? void 0 : _c2.variant;
   const cellTextStyleForRow = {
-    ...(_f2 = columnProperties == null ? void 0 : columnProperties.cellProps) == null ? void 0 : _f2.textStyle,
+    ...cellProps == null ? void 0 : cellProps.textStyle,
     variant: cellTextStyleVariant,
     textColor: cellTextStyleColor ? {
       default: cellTextStyleColor
@@ -161548,95 +160586,92 @@ function getCellProperties(tableCellTextStyle, columnProperties, rowIndex) {
   };
   const cellTextStyle = cellTextStyleForRow ?? tableCellTextStyle;
   const cellProperties = {
-    isDisabled: getPropertyValue(columnProperties.isDisabled, rowIndex),
+    isDisabled: getPropertyValue(columnProperties.isDisabled, currentRow),
     horizontalAlign: getPropertyValue(
       columnProperties.horizontalAlign,
-      rowIndex
+      currentRow
+    ),
+    verticalAlign: getPropertyValue(columnProperties.verticalAlign, currentRow),
+    cellBackground: getPropertyValue(
+      columnProperties.cellBackground,
+      currentRow
     ),
-    verticalAlign: getPropertyValue(columnProperties.verticalAlign, rowIndex),
-    cellBackground: getPropertyValue(columnProperties.cellBackground, rowIndex),
     buttonBackgroundColor: getPropertyValue(
       columnProperties.buttonBackgroundColor,
-      rowIndex
+      currentRow
     ),
-    buttonBorder: getPropertyValue(
-      columnProperties.buttonBorder,
-      rowIndex,
-      true
-    ),
-    buttonVariant: getPropertyValue(columnProperties.buttonVariant, rowIndex),
+    buttonBorder: getPropertyValue(columnProperties.buttonBorder, currentRow),
+    buttonVariant: getPropertyValue(columnProperties.buttonVariant, currentRow),
     buttonTextStyle: getPropertyValue(
       columnProperties.buttonTextStyle,
-      rowIndex,
-      true
+      currentRow
     ),
     cellIcon: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIcon : columnProperties.cellIcon,
-      rowIndex
+      currentRow
     ),
     cellIconPosition: getPropertyValue(
       columnProperties.columnType === "button" ? columnProperties.buttonIconPosition : columnProperties.cellIconPosition,
-      rowIndex
+      currentRow
     ) ?? "left",
-    buttonLabel: getPropertyValue(columnProperties.buttonLabel, rowIndex, true),
-    linkUrl: getPropertyValue(columnProperties.linkUrl, rowIndex, true),
-    linkLabel: getPropertyValue(columnProperties.linkLabel, rowIndex, true),
-    openInNewTab: getPropertyValue(
-      columnProperties.openInNewTab,
-      rowIndex,
-      true
-    ),
+    buttonLabel: getPropertyValue(columnProperties.buttonLabel, currentRow),
+    linkUrl: getPropertyValue(columnProperties.linkUrl, currentRow),
+    linkLabel: getPropertyValue(columnProperties.linkLabel, currentRow),
+    openInNewTab: getPropertyValue(columnProperties.openInNewTab, currentRow),
     cellTextStyle,
     displayedValue: getPropertyValue(
       columnProperties.displayedValue,
-      rowIndex,
-      true
+      currentRow
     ),
-    tagsWrap: getPropertyValue(columnProperties.tagsWrap, rowIndex, true),
-    textWrap: getPropertyValue(columnProperties.textWrap, rowIndex, true),
-    imageSize: getPropertyValue(columnProperties.imageSize, rowIndex),
+    tagsWrap: getPropertyValue(columnProperties.tagsWrap, currentRow),
+    textWrap: getPropertyValue(columnProperties.textWrap, currentRow),
+    imageSize: getPropertyValue(columnProperties.imageSize, currentRow),
     imageBorderRadius: getPropertyValue(
       columnProperties.imageBorderRadius,
-      rowIndex,
-      true
-    ),
-    openImageUrl: getPropertyValue(
-      columnProperties.openImageUrl,
-      rowIndex,
-      true
+      currentRow
     ),
+    openImageUrl: getPropertyValue(columnProperties.openImageUrl, currentRow),
     minimumFractionDigits: getPropertyValue(
       columnProperties.minimumFractionDigits,
-      rowIndex
+      currentRow
     ),
     maximumFractionDigits: getPropertyValue(
       columnProperties.maximumFractionDigits,
-      rowIndex
+      currentRow
     ),
-    currency: getPropertyValue(columnProperties.currency, rowIndex, true),
-    inputFormat: getPropertyValue(columnProperties.inputFormat, rowIndex, true),
-    outputFormat: getPropertyValue(columnProperties.outputFormat, rowIndex),
+    currency: getPropertyValue(columnProperties.currency, currentRow),
+    inputFormat: getPropertyValue(columnProperties.inputFormat, currentRow),
+    outputFormat: getPropertyValue(columnProperties.outputFormat, currentRow),
     manageTimezone: columnProperties.manageTimezone,
-    timezone: getPropertyValue(columnProperties.timezone, rowIndex, true),
+    timezone: getPropertyValue(columnProperties.timezone, currentRow),
     displayTimezone: getPropertyValue(
       columnProperties.displayTimezone,
-      rowIndex
+      currentRow
     )
   };
   return cellProperties;
 }
-function getPropertyValue(value, index2, preserveDataType = false) {
-  if (value && Array.isArray(value)) {
-    if (value[index2]) return value[index2].toString();
-    return value[index2];
-  } else if (value && !preserveDataType) {
-    return value.toString();
-  } else {
-    return value;
+function isContextualFunction(value) {
+  return typeof value === "function";
+}
+function getPropertyValue(value, currentRow) {
+  if (isContextualFunction(value) && currentRow) {
+    try {
+      return value({ currentRow });
+    } catch (error) {
+      console.error("Error evaluating context-aware property:", error);
+      return void 0;
+    }
+  } else if (isContextualFunction(value)) {
+    return value({ currentRow: {} });
   }
+  return value;
 }
 function getFirstPropertyValue(value) {
-  return Array.isArray(value) ? value.find(Boolean) : value;
+  if (isContextualFunction(value)) {
+    return value({ currentRow: {} });
+  }
+  return value;
 }
 const renderCell = ({
   value,
@@ -172823,11 +171858,13 @@ const downloadTableData = ({
   );
   const headerData = visibleColumns.map((column2) => column2.Header).map((v2) => sanitizeItem(v2));
   const rowData = data2.map(
-    (item, index2) => visibleColumns.map((column2) => {
+    (_15, index2) => visibleColumns.map((column2) => {
+      const itemIndex = (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2;
+      const item = data2[itemIndex];
       const cellProperties = getCellProperties(
         tableCellTextStyle,
         column2.columnProperties,
-        (filteredOrderMap == null ? void 0 : filteredOrderMap[index2]) ?? index2
+        item
       );
       const value = item[column2.columnProperties.id];
       return formatByType(value, column2.columnProperties.columnType, {
@@ -174140,7 +173177,7 @@ function getUniqueValues({
             formattedValue: formatByType(
               value,
               columnProperties.columnType,
-              getCellProperties(tableCellTextStyle, columnProperties, i3)
+              getCellProperties(tableCellTextStyle, columnProperties, row)
             ),
             rawValue: value,
             index: 0
@@ -174156,7 +173193,7 @@ function getUniqueValues({
           formattedValue: formatByType(
             rawValue,
             columnProperties.columnType,
-            getCellProperties(tableCellTextStyle, columnProperties, i3)
+            getCellProperties(tableCellTextStyle, columnProperties, row)
           ),
           rawValue,
           index: 0
@@ -176887,6 +175924,23 @@ const _TableWidget = class _TableWidget extends React__default.Component {
         onComplete();
       }
     });
+    __publicField(this, "columnPropertyFunctionMap", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "functionCounter", 0);
+    __publicField(this, "getColumnPropertiesString", (columnProperties) => {
+      return Object.keys(columnProperties).reduce((acc, key2) => {
+        const val = columnProperties[key2];
+        if (typeof val === "function") {
+          if (!this.columnPropertyFunctionMap.has(val)) {
+            this.columnPropertyFunctionMap.set(
+              val,
+              `__func_${this.functionCounter++}`
+            );
+          }
+          return acc + `${key2} ${this.columnPropertyFunctionMap.get(val)}`;
+        }
+        return acc + `${key2}: ${JSON.stringify(val)}`;
+      });
+    });
     __publicField(this, "getEmptyRow", () => {
       const columnKeys = getAllTableColumnKeys(this.props.tableData);
       const selectedRow = {};
@@ -176956,7 +176010,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
       }
       return getPropertyValue(
         this.props.columns[columnId].cellBackground,
-        originalRowIndex
+        this.props.tableData[originalRowIndex]
       );
     });
     __publicField(this, "getIsLoading", () => {
@@ -177696,7 +176750,6 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     const columnsArray = [];
     const { sortedColumn, columnOrder, columnSizeMap, columns, columnFreezes } = this.props;
     let allColumns = columns;
-    const tableProps = this.props;
     const sortColumn = sortedColumn == null ? void 0 : sortedColumn.column;
     const sortOrder = sortedColumn == null ? void 0 : sortedColumn.asc;
     allColumns = reorderColumns(allColumns, columnOrder ?? [], columnFreezes);
@@ -177800,212 +176853,16 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           index: this.props.multiRowSelection ? columnProperties.index + 1 : columnProperties.index,
           notation: columnNotation
         },
-        Cell: (props2) => {
-          var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i, _j, _k, _l2, _m2, _n2, _o2, _p2, _q, _r2, _s2, _t2, _u2, _v, _w, _x, _y;
-          const currentRowIndex = props2.cell.row.index;
-          const originalRowIndex = ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
-          const isEdited = ((_b2 = this.props.editOverrides) == null ? void 0 : _b2[originalRowIndex]) != null && columnProperties.id in this.props.editOverrides[originalRowIndex];
-          const isInserted = this.getIsRowInserted(originalRowIndex);
-          const isDeleted = this.getIsRowDeleted(originalRowIndex);
-          const indexInTableDataWithInserts = ((_c2 = this.props.tableDataWithInsertsOrderMap) == null ? void 0 : _c2[originalRowIndex]) ?? originalRowIndex;
-          const cellProperties = getCellProperties(
-            (_e2 = (_d2 = this.props) == null ? void 0 : _d2.cellProps) == null ? void 0 : _e2.textStyle,
-            columnProperties,
-            indexInTableDataWithInserts
-          );
-          const isEditable = !isDeleted && (isInserted ? columnProperties.isEditableOnInsertion : columnProperties.isEditable);
-          if (isEditable) {
-            let rawValue;
-            if (isInserted) {
-              rawValue = (_h2 = (_g2 = (_f2 = this.props.inserts) == null ? void 0 : _f2.insertedRowsById) == null ? void 0 : _g2[originalRowIndex]) == null ? void 0 : _h2[columnProperties.id];
-            } else if (isEdited) {
-              rawValue = (_j = (_i = this.props.editOverrides) == null ? void 0 : _i[originalRowIndex]) == null ? void 0 : _j[columnProperties.id].value;
-            } else if (columnProperties.isDerived) {
-              rawValue = props2.cell.value;
-            } else {
-              rawValue = (_l2 = (_k = this.props.tableData) == null ? void 0 : _k[originalRowIndex]) == null ? void 0 : _l2[columnProperties.id];
-            }
-            const value = isInserted ? rawValue ?? "" : props2.cell.value;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              EditableCell,
-              {
-                theme: this.props.theme,
-                value,
-                rawValue,
-                columnType: columnProperties.columnType,
-                isInserted,
-                columnName: columnProperties.label,
-                cellProps: {
-                  isHidden: isHidden2,
-                  cellProperties,
-                  tagsColorAssignment: (_m2 = this.cachedTagColorAssignment) == null ? void 0 : _m2[columnProperties.id],
-                  notation: columnNotation,
-                  currency: columnProperties.currency,
-                  minimumFractionDigits: columnProperties.minimumFractionDigits,
-                  maximumFractionDigits: columnProperties.maximumFractionDigits,
-                  booleanStyleFalse: columnProperties.booleanStyleFalse,
-                  rowDensity: this.props.rowDensity,
-                  isFocused: props2.isFocused,
-                  displayedValue: this.getDisplayedValueForEditCell({
-                    columnId: columnProperties.id,
-                    rawValue,
-                    displayedValue: cellProperties.displayedValue,
-                    useLabelAsDisplayValue: columnProperties.useLabelAsDisplayValue
-                  }),
-                  cellIcon: getPropertyValue(
-                    columnProperties.cellIcon,
-                    indexInTableDataWithInserts,
-                    true
-                  ),
-                  cellIconPosition: columnProperties.cellIconPosition ?? "left",
-                  inputFormat: getPropertyValue(
-                    columnProperties.inputFormat,
-                    indexInTableDataWithInserts,
-                    true
-                  ),
-                  outputFormat: getPropertyValue(
-                    columnProperties.outputFormat,
-                    indexInTableDataWithInserts,
-                    true
-                  ),
-                  manageTimezone: columnProperties.manageTimezone,
-                  timezone: getPropertyValue(
-                    columnProperties.timezone,
-                    indexInTableDataWithInserts,
-                    true
-                  ),
-                  displayTimezone: getPropertyValue(
-                    columnProperties.displayTimezone,
-                    indexInTableDataWithInserts,
-                    true
-                  ),
-                  isMultiselecting: this.currentCellFocus.length > 1
-                },
-                editProps: {
-                  handleEditStart: this.handleEditStart.bind(
-                    this,
-                    originalRowIndex,
-                    columnProperties.id,
-                    this.getCellValue(
-                      originalRowIndex,
-                      columnProperties.id
-                    )
-                  ),
-                  handleEditChange: this.debouncedEditChange,
-                  handleEditStop: this.onEditStop.bind(
-                    this,
-                    columnProperties,
-                    currentRowIndex
-                  ),
-                  onDropdownSearchTextChanged: () => props2.onDropdownSearchTextChanged(),
-                  currentEditDropdownSearchText: this.props.currentEditDropdownSearchText,
-                  handleOneClickEdit: this.handleOneClickEdit.bind(
-                    this,
-                    columnProperties,
-                    originalRowIndex
-                  ),
-                  isEditFocused: ((_n2 = this.props.currentEditFocus) == null ? void 0 : _n2.row) === originalRowIndex && ((_o2 = this.props.currentEditFocus) == null ? void 0 : _o2.columnId) === columnProperties.id,
-                  isEdited,
-                  currentEditValue: this.props.currentEditValue,
-                  editInputType: columnProperties.editInputType,
-                  editCustomValidationRule: this.customEditValidation[columnProperties.id],
-                  editCustomErrorMessage: this.customEditMessage[columnProperties.id],
-                  editMaxLength: columnProperties.editMaxLength,
-                  editMinLength: columnProperties.editMinLength,
-                  editIsRequired: isInserted ? columnProperties.isRequiredOnInsertion : columnProperties.editIsRequired,
-                  editMultiSelect: columnProperties.editMultiSelect,
-                  allowClearing: columnProperties.allowClearing,
-                  dropdownOptionsLoading: this.getDropdownOptionsLoading(),
-                  editDropdownClientSideFiltering: columnProperties.editDropdownClientSideFiltering,
-                  editOptions: this.editOptions[columnProperties.id],
-                  transformation: columnProperties.transformation,
-                  validationErrors: isInserted ? ((_r2 = (_q = (_p2 = this.props.inserts) == null ? void 0 : _p2.insertedRowValidations) == null ? void 0 : _q[originalRowIndex]) == null ? void 0 : _r2[columnProperties.id]) ?? [] : ((_u2 = (_t2 = (_s2 = this.props.editOverrides) == null ? void 0 : _s2[originalRowIndex]) == null ? void 0 : _t2[columnProperties.id]) == null ? void 0 : _u2.validationErrors) ?? [],
-                  editMinDate: columnProperties.editMinDate,
-                  editMaxDate: columnProperties.editMaxDate,
-                  editTwentyFourHourTime: columnProperties.editTwentyFourHourTime
-                },
-                tableName: this.props.widgetName,
-                rowDensity: getRowDensity(this.props.rowDensity),
-                maxLinesPerRow: this.props.maxLinesPerRow,
-                position: {
-                  currentRowIndex,
-                  columnId: columnProperties.id,
-                  originalRowIndex
-                }
-              }
-            );
-          } else if (columnProperties.columnType === ColumnType.BUTTON) {
-            const buttonProps = {
-              rowIndex: currentRowIndex,
-              isSelected: !!props2.row.isSelected,
-              isDisabled: cellProperties.isDisabled,
-              onClick: (onComplete) => {
-                this.handleTableButtonClick(columnProperties.id, onComplete);
-              },
-              handleRowSelect: this.handleRowSelect,
-              backgroundColor: cellProperties.buttonBackgroundColor,
-              buttonBorder: cellProperties.buttonBorder,
-              buttonVariant: cellProperties.buttonVariant ?? "primary",
-              buttonTextStyle: cellProperties.buttonTextStyle,
-              cellIcon: getPropertyValue(
-                columnProperties.buttonIcon,
-                indexInTableDataWithInserts
-              ),
-              cellIconPosition: cellProperties.cellIconPosition ?? "left",
-              rowDensity: this.props.rowDensity,
-              id: columnProperties.id,
-              buttonLabel: cellProperties.buttonLabel ?? "Action",
-              isHidden: isHidden2,
-              theme: this.props.theme
-            };
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(TableButton, { ...buttonProps });
-          } else if (columnProperties.columnType === "link") {
-            return renderLink({
-              cellProperties,
-              isHidden: isHidden2,
-              rowDensity: this.props.rowDensity,
-              position: {
-                columnId: columnProperties.id
-              },
-              maxLinesPerRow: this.props.maxLinesPerRow,
-              tableCellTextStyle: (_v = this.props.cellProps) == null ? void 0 : _v.textStyle,
-              value: props2.cell.value
-            });
-          } else {
-            return renderCell({
-              theme: this.props.theme,
-              value: props2.cell.value,
-              columnType: columnProperties.columnType,
-              editInputType: columnProperties.editInputType,
-              maxLinesPerRow: this.props.maxLinesPerRow,
-              tableCellTextStyle: (_w = this.props.cellProps) == null ? void 0 : _w.textStyle,
-              typographies: this.props.theme.typographies,
-              cellProps: {
-                // since these are overridden by the cellProperties
-                ...columnProperties,
-                ...getCellProperties(
-                  (_x = tableProps == null ? void 0 : tableProps.cellProps) == null ? void 0 : _x.textStyle,
-                  columnProperties,
-                  indexInTableDataWithInserts
-                ),
-                isHidden: isHidden2,
-                cellProperties,
-                tagsColorAssignment: (_y = this.cachedTagColorAssignment) == null ? void 0 : _y[columnProperties.id],
-                booleanStyleFalse: columnProperties.booleanStyleFalse,
-                rowDensity: this.props.rowDensity,
-                isFocused: props2.isFocused,
-                isMultiselecting: this.currentCellFocus.length > 1
-              },
-              position: {
-                columnId: columnProperties.id
-              }
-            });
-          }
-        }
+        Cell: this.createTableCell(columnProperties, isHidden2)
       };
       columnsArray.push(columnData);
     }
-    const columnString = JSON.stringify(columnsArray);
+    const columnString = JSON.stringify(columnsArray, (key2, value) => {
+      if (key2 === "columnProperties") {
+        return this.getColumnPropertiesString(value);
+      }
+      return value;
+    });
     if (columnString === this.previousColumnsString) {
       return this.previousColumns;
     }
@@ -178013,6 +176870,85 @@ const _TableWidget = class _TableWidget extends React__default.Component {
     this.previousColumns = columnsArray;
     return columnsArray;
   }
+  createTableCell(columnProperties, isHidden2) {
+    return (props2) => {
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+      const currentRowIndex = props2.cell.row.index;
+      ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
+      const cellProperties = getCellProperties(
+        (_c2 = (_b2 = this.props) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c2.textStyle,
+        columnProperties,
+        props2.cell.row.original
+      );
+      if (columnProperties.columnType === ColumnType.BUTTON) {
+        const buttonProps = {
+          rowIndex: currentRowIndex,
+          isSelected: !!props2.row.isSelected,
+          isDisabled: cellProperties.isDisabled,
+          onClick: (onComplete) => {
+            this.handleTableButtonClick(columnProperties.id, onComplete);
+          },
+          handleRowSelect: this.handleRowSelect,
+          backgroundColor: cellProperties.buttonBackgroundColor,
+          buttonBorder: cellProperties.buttonBorder,
+          buttonVariant: cellProperties.buttonVariant ?? "primary",
+          buttonTextStyle: cellProperties.buttonTextStyle,
+          cellIcon: getPropertyValue(
+            columnProperties.buttonIcon,
+            props2.cell.row.original
+          ),
+          cellIconPosition: cellProperties.cellIconPosition ?? "left",
+          rowDensity: this.props.rowDensity,
+          id: columnProperties.id,
+          buttonLabel: cellProperties.buttonLabel ?? "Action",
+          isHidden: isHidden2,
+          theme: this.props.theme
+        };
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(TableButton, { ...buttonProps });
+      } else if (columnProperties.columnType === "link") {
+        return renderLink({
+          cellProperties,
+          isHidden: isHidden2,
+          rowDensity: this.props.rowDensity,
+          position: {
+            columnId: columnProperties.id
+          },
+          maxLinesPerRow: this.props.maxLinesPerRow,
+          tableCellTextStyle: (_d2 = this.props.cellProps) == null ? void 0 : _d2.textStyle,
+          value: props2.cell.value
+        });
+      } else {
+        return renderCell({
+          theme: this.props.theme,
+          value: props2.cell.value,
+          columnType: columnProperties.columnType,
+          editInputType: columnProperties.editInputType,
+          maxLinesPerRow: this.props.maxLinesPerRow,
+          tableCellTextStyle: (_e2 = this.props.cellProps) == null ? void 0 : _e2.textStyle,
+          typographies: this.props.theme.typographies,
+          cellProps: {
+            // since these are overridden by the cellProperties
+            ...columnProperties,
+            ...getCellProperties(
+              (_g2 = (_f2 = this.props) == null ? void 0 : _f2.cellProps) == null ? void 0 : _g2.textStyle,
+              columnProperties,
+              props2.cell.row.original
+            ),
+            isHidden: isHidden2,
+            cellProperties,
+            tagsColorAssignment: (_h2 = this.cachedTagColorAssignment) == null ? void 0 : _h2[columnProperties.id],
+            booleanStyleFalse: columnProperties.booleanStyleFalse,
+            rowDensity: this.props.rowDensity,
+            isFocused: props2.isFocused,
+            isMultiselecting: this.currentCellFocus.length > 1
+          },
+          position: {
+            columnId: columnProperties.id
+          }
+        });
+      }
+    };
+  }
   static getParsedComputedValues(value) {
     let computedValues = [];
     if (lodashExports.isString(value)) {
@@ -181354,8 +180290,8 @@ const StyledCrossIcon = qe$1(SvgCrossXs)`
   right: ${({ right: right2 }) => `${right2}px`};
   top: 50%;
   transform: translateY(-50%);
-  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
-  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE$1}px`};
+  height: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
+  width: ${({ iconSize }) => `${iconSize ?? DEFAULT_ICON_SIZE}px`};
   z-index: 4; // TODO: do we need to use Layers?
   cursor: pointer;
 `;
@@ -186237,9 +185173,9 @@ const generateDropdownStyles = (theme) => {
       transform: translateY(-50%);
       z-index: 99;
       background-repeat: no-repeat;
-      background-size: ${DEFAULT_ICON_SIZE$1}px;
-      width: ${DEFAULT_ICON_SIZE$1}px;
-      height: ${DEFAULT_ICON_SIZE$1}px;
+      background-size: ${DEFAULT_ICON_SIZE}px;
+      width: ${DEFAULT_ICON_SIZE}px;
+      height: ${DEFAULT_ICON_SIZE}px;
       display: block;
       position: absolute;
       cursor: pointer;
@@ -198486,4 +197422,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-CJnCDVsr.js.map
+//# sourceMappingURL=index-CQOHJMew.js.map