@sparrowengg/integrations-templates-frontend 1.9.84-beta.9 → 2.1.0-beta.1

package/dist/cjs/triggers/components/subcomponents.js

@@ -1,1139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var string = require('../../node_modules/@internationalized/date/dist/string.js');
-var dayjs_min = require('../../node_modules/dayjs/dayjs.min.js');
-var index = require('../../commons/constants/index.js');
-var nestedAdd = require('../../commons/icons/nested-add.js');
-var trash = require('../../commons/icons/trash.js');
-var index$1 = require('../constants/index.js');
-var customPill = require('../../commons/components/custom-pill.js');
-var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
-var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
-var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
-var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
-var close = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/close.js');
-var popover = require('../../node_modules/@sparrowengg/twigs-react/dist/es/popover/popover.js');
-var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
-var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
-var input = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js');
-var search = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js');
-var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
-var calendar = require('../../node_modules/@sparrowengg/twigs-react/dist/es/calendar/calendar.js');
-var checkbox = require('../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
-var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
-var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
-var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const getCurrentConditionText = (text, dataType) => {
-  let currentText = "";
-  switch (text) {
-    case index$1.comparatorConstants.IS:
-      currentText = dataType.includes("BOOLEAN") ? "is" : "is equal to";
-      break;
-    case index$1.comparatorConstants.IS_NOT:
-      currentText = "is not equal to";
-      break;
-    case index$1.comparatorConstants.CONTAINS:
-      currentText = "contains";
-      break;
-    case index$1.comparatorConstants.CONTAINS_NOT:
-      currentText = "not contains";
-      break;
-    case index$1.comparatorConstants.NO_VALUE:
-      currentText = "has no value";
-      break;
-    case index$1.comparatorConstants.ANY_VALUE:
-      currentText = "has any value";
-      break;
-    case index$1.comparatorConstants.ON:
-      currentText = "on";
-      break;
-    case index$1.comparatorConstants.AFTER:
-      currentText = "after";
-      break;
-    case index$1.comparatorConstants.BEFORE:
-      currentText = "before";
-      break;
-    case index$1.comparatorConstants.TRUE:
-    case index$1.comparatorConstants.FALSE:
-      currentText = "Boolean";
-      break;
-    default:
-      currentText = "";
-      break;
-  }
-  return currentText;
-};
-const Filter = ({
-  setIsEditing,
-  filters,
-  fields,
-  index,
-  isEditing,
-  setCurrentField,
-  resetEditing,
-  hasNestedCondition,
-  addNestedFilterCondition,
-  setNestedFieldCondition,
-  removeCurrentFilter,
-  removeNestedField,
-  fieldOptions
-}) => {
-  return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$1" }, /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      alignItems: "center",
-      gap: "5px",
-      css: {
-        marginBottom: "$4",
-        "&:hover": {
-          "#action-btn": {
-            opacity: 1
-          }
-        }
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      text.Text,
-      {
-        weight: "bold",
-        css: {
-          whiteSpace: "nowrap"
-        }
-      },
-      index > 0 && fields.condition.toLowerCase(),
-      " When"
-    ),
-    /* @__PURE__ */ React.createElement(
-      box.Box,
-      {
-        css: {
-          borderBottom: "$borderWidths$xs solid $black200",
-          width: "100%",
-          marginLeft: "$3",
-          position: "relative"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          css: {
-            position: "absolute",
-            right: 0,
-            top: "-$6",
-            background: "$white900",
-            paddingLeft: "$2",
-            opacity: 0,
-            transition: "all .3s ease"
-          },
-          id: "action-btn",
-          alignItems: "center",
-          gap: "$4"
-        },
-        hasNestedCondition && /* @__PURE__ */ React.createElement(
-          iconButton.IconButton,
-          {
-            icon: /* @__PURE__ */ React.createElement(nestedAdd.default, null),
-            size: "sm",
-            variant: "ghost",
-            color: "default",
-            onClick: () => addNestedFilterCondition(filters.id)
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          iconButton.IconButton,
-          {
-            icon: /* @__PURE__ */ React.createElement(trash.default, null),
-            size: "sm",
-            variant: "ghost",
-            color: "default",
-            onClick: () => removeCurrentFilter(filters.id)
-          }
-        )
-      )
-    )
-  ), filters.filter.map((currentFilter, currentFilterIndex) => {
-    var _a, _b;
-    return /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        alignItems: "center",
-        justifyContent: "space-between",
-        css: {
-          "&:hover": {
-            "& button": {
-              opacity: 1
-            }
-          }
-        }
-      },
-      /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", alignItems: "center" }, currentFilterIndex > 0 && /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          css: { cursor: "pointer" },
-          onClick: () => {
-            setNestedFieldCondition(
-              filters.id,
-              filters.condition.toLowerCase() === "or" ? "AND" : "OR"
-            );
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          customPill.default,
-          {
-            variant: "default",
-            radius: "sm",
-            isClosable: false,
-            label: filters.condition.toLowerCase()
-          }
-        )
-      ), isEditing && !currentFilter.field ? /* @__PURE__ */ React.createElement(
-        FieldPopover,
-        {
-          setCurrentField,
-          currentFilter,
-          filters,
-          fieldOptions
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        CustomFieldChip,
-        {
-          setCurrentField,
-          setIsEditing,
-          currentFilter,
-          filters,
-          fieldType: "field"
-        },
-        (_b = (_a = fieldOptions == null ? void 0 : fieldOptions.find(
-          (option) => option.value === currentFilter.field
-        )) == null ? void 0 : _a.label) != null ? _b : currentFilter.field,
-        " "
-      ), isEditing && !currentFilter.comparator && !!currentFilter.field ? /* @__PURE__ */ React.createElement(
-        DataTypePopover,
-        {
-          setCurrentField,
-          currentFilter,
-          filters
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        CustomFieldChip,
-        {
-          setCurrentField,
-          setIsEditing,
-          currentFilter,
-          filters,
-          fieldType: "comparator"
-        },
-        getCurrentConditionText(
-          currentFilter.comparator,
-          currentFilter.dataType
-        )
-      ), isEditing && !!currentFilter.comparator && !!currentFilter.dataType && !currentFilter.value ? /* @__PURE__ */ React.createElement(
-        FieldValuePopover,
-        {
-          fieldOptions,
-          setCurrentField,
-          currentFilter,
-          filters,
-          resetEditing
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        CustomFieldChip,
-        {
-          setCurrentField,
-          setIsEditing,
-          currentFilter,
-          filters,
-          fieldType: "value"
-        },
-        Array.isArray(currentFilter.value) ? currentFilter.value.join(", ") : currentFilter.value
-      )),
-      /* @__PURE__ */ React.createElement(
-        iconButton.IconButton,
-        {
-          css: { opacity: 0 },
-          icon: /* @__PURE__ */ React.createElement(close.CloseIcon, null),
-          size: "sm",
-          color: "default",
-          variant: "ghost",
-          onClick: () => removeNestedField(filters.id, currentFilter.id)
-        }
-      )
-    );
-  }));
-};
-const RenderFieldValuePopover = ({
-  fieldOptions,
-  setCurrentField,
-  currentFilter,
-  filters,
-  resetEditing,
-  setShowPopover
-}) => {
-  var _a;
-  const [date, setDate] = React.useState(
-    string.parseDate(dayjs_min.default().format("YYYY-MM-DD"))
-  );
-  const [inputValue, setInputValue] = React.useState("");
-  const [selectedField, setSelectedField] = React.useState([]);
-  const field = (_a = fieldOptions.find(
-    (option) => option.value === currentFilter.field
-  )) == null ? void 0 : _a.options;
-  if (currentFilter.dataType === "BOOLEAN") {
-    return /* @__PURE__ */ React.createElement(box.Box, { css: { paddingBlock: "$5" } }, index.booleanOptions.map((option) => /* @__PURE__ */ React.createElement(
-      text.Text,
-      {
-        size: "sm",
-        onClick: () => {
-          setCurrentField(
-            option.value,
-            currentFilter == null ? void 0 : currentFilter.id,
-            filters == null ? void 0 : filters.id,
-            "value"
-          );
-          setShowPopover(false);
-          resetEditing();
-        },
-        css: {
-          padding: "$3 $6",
-          cursor: "pointer",
-          "&:hover": {
-            background: "$neutral100"
-          }
-        }
-      },
-      option.label
-    )));
-  } else if (currentFilter.comparator === "NO_VALUE" || currentFilter.comparator === "ANY_VALUE") {
-    setCurrentField(" ", currentFilter == null ? void 0 : currentFilter.id, filters == null ? void 0 : filters.id, "value");
-    setShowPopover(false);
-    resetEditing();
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
-  } else if (currentFilter.dataType === "DATE_TIME") {
-    return /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
-      calendar.Calendar,
-      {
-        size: "md",
-        footerActionText: "Apply",
-        value: date,
-        showTimePicker: true,
-        onChange: setDate,
-        footerAction: () => {
-          setCurrentField(
-            dayjs_min.default(date).format("MMM D YYYY . hh:mm A"),
-            currentFilter == null ? void 0 : currentFilter.id,
-            filters == null ? void 0 : filters.id,
-            "value"
-          );
-          setShowPopover(false);
-          resetEditing();
-        }
-      }
-    ));
-  } else if (field == null ? void 0 : field.length) {
-    if (currentFilter.dataType === "SELECT") {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
-        input.Input,
-        {
-          placeholder: "Search",
-          leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
-          variant: "filled",
-          size: "lg",
-          value: inputValue,
-          onChange: (e) => setInputValue(e.currentTarget.value)
-        }
-      )), /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          flexDirection: "column",
-          css: {
-            paddingBottom: "$4",
-            maxHeight: 240,
-            height: "100%",
-            overflow: "auto"
-          }
-        },
-        !!field.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, field.filter(
-          (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
-        ).map((field2) => /* @__PURE__ */ React.createElement(
-          box.Box,
-          {
-            onClick: () => {
-              setCurrentField(
-                field2.value,
-                currentFilter == null ? void 0 : currentFilter.id,
-                filters == null ? void 0 : filters.id,
-                "value"
-              );
-              setShowPopover(false);
-              resetEditing();
-            },
-            css: {
-              padding: "$3 $6",
-              transition: "all .3s ease",
-              cursor: "pointer",
-              "&:hover": {
-                backgroundColor: "rgba(100, 116, 139, 0.06)"
-              }
-            },
-            key: field2 == null ? void 0 : field2.id
-          },
-          /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, field2.label)
-        ))) : /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            css: {
-              padding: "$3 $6",
-              color: "$neutral800",
-              textAlign: "center"
-            }
-          },
-          "No options"
-        )
-      ));
-    } else {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
-        input.Input,
-        {
-          placeholder: "Search",
-          leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
-          variant: "filled",
-          size: "lg",
-          value: inputValue,
-          onChange: (e) => setInputValue(e.currentTarget.value)
-        }
-      )), /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          flexDirection: "column",
-          css: {
-            paddingBottom: "$4",
-            maxHeight: 240,
-            height: "100%",
-            overflow: "auto"
-          }
-        },
-        !!field.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$3 $6" } }, /* @__PURE__ */ React.createElement(
-          checkbox.Checkbox,
-          {
-            size: "sm",
-            checked: selectedField.length === field.length,
-            onChange: (checked) => {
-              if (checked) {
-                setSelectedField(field.map((item) => item.value));
-              } else {
-                setSelectedField([]);
-              }
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            text.Text,
-            {
-              css: {
-                cursor: "pointer"
-              },
-              size: "sm"
-            },
-            "Select All"
-          )
-        )), field.filter(
-          (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
-        ).map((field2) => /* @__PURE__ */ React.createElement(
-          box.Box,
-          {
-            css: {
-              padding: "$3 $6",
-              transition: "all .3s ease",
-              cursor: "pointer",
-              "&:hover": {
-                backgroundColor: "rgba(100, 116, 139, 0.06)"
-              }
-            },
-            key: field2 == null ? void 0 : field2.id
-          },
-          /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(
-            checkbox.Checkbox,
-            {
-              size: "sm",
-              checked: selectedField.includes(field2.value),
-              onChange: (checked) => {
-                if (checked) {
-                  setSelectedField([...selectedField, field2.value]);
-                } else {
-                  setSelectedField(
-                    selectedField.filter(
-                      (item) => item !== field2.value
-                    )
-                  );
-                }
-              }
-            },
-            /* @__PURE__ */ React.createElement(
-              text.Text,
-              {
-                css: {
-                  cursor: "pointer"
-                },
-                size: "sm"
-              },
-              field2.label
-            )
-          ))
-        )), /* @__PURE__ */ React.createElement(
-          flex.Flex,
-          {
-            justifyContent: "flex-end",
-            css: {
-              position: "sticky",
-              bottom: 0,
-              paddingBlock: "$4 !important",
-              marginInlineEnd: "$6 !important"
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            button.Button,
-            {
-              size: "sm",
-              variant: "ghost",
-              color: "primary",
-              onClick: () => {
-                setCurrentField(
-                  selectedField,
-                  currentFilter == null ? void 0 : currentFilter.id,
-                  filters == null ? void 0 : filters.id,
-                  "value"
-                );
-                setShowPopover(false);
-                resetEditing();
-              }
-            },
-            "Apply"
-          )
-        )) : /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            css: {
-              padding: "$3 $6",
-              color: "$neutral800",
-              textAlign: "center"
-            }
-          },
-          "No options"
-        )
-      ));
-    }
-  } else {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
-      formInput.FormInput,
-      __spreadProps(__spreadValues({
-        placeholder: currentFilter.dataType === "NUMBER" ? "Enter a number" : "Enter a value",
-        type: "text",
-        variant: "filled",
-        size: "lg"
-      }, (currentFilter.dataType === "NUMBER" || currentFilter.dataType === "PHONE_NUMBER") && {
-        maxLength: 10
-      }), {
-        value: inputValue,
-        onChange: (e) => setInputValue(
-          currentFilter.dataType === "NUMBER" || currentFilter.dataType === "PHONE_NUMBER" ? e.target.value.replace(/\D/g, "") : e.target.value
-        ),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" && (inputValue == null ? void 0 : inputValue.length)) {
-            setCurrentField(
-              inputValue,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "value"
-            );
-            setShowPopover(false);
-            resetEditing();
-          }
-        }
-      })
-    ), currentFilter.dataType === "PHONE_NUMBER" && /* @__PURE__ */ React.createElement(
-      formLabel.FormLabel,
-      {
-        size: "xs",
-        css: { fontWeight: "$5", marginTop: "$2", marginLeft: "$1" }
-      },
-      "Enter a valid number without the country code"
-    )), /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        alignItems: "center",
-        justifyContent: "space-between",
-        css: {
-          borderTop: "$borderWidths$xs solid $neutral100",
-          padding: "$4 $6",
-          marginTop: "$4"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          size: "md",
-          color: "secondary",
-          variant: "ghost",
-          onClick: () => setShowPopover(false)
-        },
-        "Cancel"
-      ),
-      /* @__PURE__ */ React.createElement(
-        button.Button,
-        {
-          size: "md",
-          variant: "ghost",
-          disabled: !(inputValue == null ? void 0 : inputValue.length),
-          onClick: () => {
-            setCurrentField(
-              inputValue,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "value"
-            );
-            setShowPopover(false);
-            resetEditing();
-          }
-        },
-        "Save"
-      )
-    ));
-  }
-};
-const FieldValuePopover = ({
-  setCurrentField,
-  currentFilter,
-  filters,
-  resetEditing,
-  fieldOptions
-}) => {
-  const [showPopover, setShowPopover] = React.useState(true);
-  const hasError = !currentFilter.value && !showPopover;
-  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true, open: showPopover }, /* @__PURE__ */ React.createElement(tooltip.TooltipProvider, { delayDuration: 0 }, /* @__PURE__ */ React.createElement(
-    tooltip.Tooltip,
-    {
-      side: "right",
-      content: hasError ? "Enter Value to complete the condition" : ""
-    },
-    /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true, onClick: () => setShowPopover(!showPopover) }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, { hasError }, "Type Value")))
-  )), /* @__PURE__ */ React.createElement(
-    popover.PopoverContent,
-    {
-      onPointerDownOutside: () => setShowPopover(false),
-      sideOffset: 4,
-      align: "start",
-      side: currentFilter.dataType === "DATE_TIME" ? "right" : "bottom",
-      css: {
-        minWidth: 220,
-        borderRadius: "$xl",
-        border: "0.7px solid $black300",
-        padding: 0
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      RenderFieldValuePopover,
-      {
-        fieldOptions,
-        setShowPopover,
-        setCurrentField,
-        currentFilter,
-        filters,
-        resetEditing
-      }
-    )
-  ));
-};
-const DataTypePopover = ({
-  setCurrentField,
-  currentFilter,
-  filters
-}) => {
-  var _a, _b;
-  const [subMenuContent, setSubMenuContent] = React.useState({
-    show: false,
-    type: ""
-  });
-  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, null, "Choose Data Type"))), /* @__PURE__ */ React.createElement(
-    popover.PopoverContent,
-    {
-      sideOffset: 4,
-      align: "start",
-      css: {
-        width: 260,
-        borderRadius: "$xl",
-        border: "0.7px solid $black300",
-        padding: 0
-      }
-    },
-    !subMenuContent.show && !currentFilter.dataType.length ? /* @__PURE__ */ React.createElement(box.Box, { css: { paddingTop: "$6" } }, /* @__PURE__ */ React.createElement(
-      text.Text,
-      {
-        size: "sm",
-        onClick: () => {
-          setCurrentField(
-            "NO_PREFERENCE",
-            currentFilter == null ? void 0 : currentFilter.id,
-            filters == null ? void 0 : filters.id,
-            "dataType"
-          );
-          setCurrentField(
-            "NO_PREFERENCE",
-            currentFilter == null ? void 0 : currentFilter.id,
-            filters == null ? void 0 : filters.id,
-            "comparator"
-          );
-          setSubMenuContent({
-            show: false,
-            type: ""
-          });
-        },
-        css: {
-          padding: "$3 $6",
-          marginBottom: "$4",
-          cursor: "pointer",
-          "&:hover": {
-            background: "$neutral100"
-          }
-        }
-      },
-      "No Preference"
-    ), /* @__PURE__ */ React.createElement(
-      box.Box,
-      {
-        css: {
-          paddingTop: "$4",
-          borderTop: "$borderWidths$xs solid $neutral100"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          css: {
-            textTransform: "uppercase",
-            color: "$neutral600",
-            padding: "$4 $6"
-          },
-          size: "xs",
-          weight: "bold"
-        },
-        "Select data type"
-      ),
-      index.subMenuOptions.map((option) => /* @__PURE__ */ React.createElement(
-        flex.Flex,
-        {
-          alignItems: "center",
-          justifyContent: "space-between",
-          onClick: () => {
-            if (option.value === "BOOLEAN") {
-              setCurrentField(
-                option.value,
-                currentFilter == null ? void 0 : currentFilter.id,
-                filters == null ? void 0 : filters.id,
-                "dataType"
-              );
-              setCurrentField(
-                index$1.comparatorConstants.IS,
-                currentFilter == null ? void 0 : currentFilter.id,
-                filters == null ? void 0 : filters.id,
-                "comparator"
-              );
-            } else {
-              setCurrentField(
-                option.value,
-                currentFilter == null ? void 0 : currentFilter.id,
-                filters == null ? void 0 : filters.id,
-                "dataType"
-              );
-              setSubMenuContent({
-                show: true,
-                type: option.value
-              });
-            }
-          },
-          css: {
-            cursor: "pointer",
-            padding: "$3 $6",
-            "&:hover": {
-              background: "rgba(100, 116, 139, 0.08)",
-              "#subLabelIcon": {
-                opacity: 1
-              }
-            }
-          }
-        },
-        /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "sm",
-            css: { lineHeight: "$md", color: "$neutral900" }
-          },
-          option.label
-        ), !!option.subLabel && /* @__PURE__ */ React.createElement(
-          text.Text,
-          {
-            size: "xs",
-            css: { lineHeight: "$xs", color: "$neutral700" }
-          },
-          option.subLabel
-        )),
-        /* @__PURE__ */ React.createElement(box.Box, { css: { opacity: 0 }, id: "subLabelIcon" }, /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 20 }))
-      ))
-    ), /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        css: {
-          background: "rgba(100, 116, 139, 0.06)",
-          padding: "$6 $8"
-        },
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { color: "$neutral600", lineHeight: "$xs" } }, "Select the right data type for the mapping to prevent errors when sharing value.")
-    )) : /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        alignItems: "center",
-        gap: "$4",
-        css: {
-          display: !((_a = index.subMenuOptions.find(
-            (option) => option.value === subMenuContent.type
-          )) == null ? void 0 : _a.label) ? "none" : "flex",
-          padding: "$5 $4",
-          borderRadius: "$xl $xl 0 0",
-          backgroundColor: "rgba(100, 116, 139, 0.06)",
-          borderBottom: "$borderWidths$xs solid rgba(100, 116, 139, 0.08)"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          onClick: () => setSubMenuContent({
-            show: false,
-            type: ""
-          }),
-          css: {
-            borderRight: "$borderWidths$xs solid $secondary100",
-            paddingRight: "$2",
-            cursor: "pointer"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          chevronRight.ChevronRightIcon,
-          {
-            style: { transform: "scaleX(-1)", color: "#76859A" },
-            size: 20
-          }
-        )
-      ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$secondary400" } }, (_b = index.subMenuOptions.find(
-        (option) => option.value === subMenuContent.type
-      )) == null ? void 0 : _b.label), /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { style: { color: "#76859A" }, size: 16 }), /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          weight: "medium",
-          css: { color: "$secondary600" }
-        },
-        subMenuContent.type === "DATE_TIME" ? "Select" : "Choose"
-      ))
-    ), /* @__PURE__ */ React.createElement(
-      box.Box,
-      {
-        css: {
-          paddingBlock: subMenuContent.type === "DATE_TIME" ? 0 : "$4"
-        }
-      },
-      /* @__PURE__ */ React.createElement(
-        PopoverFields,
-        {
-          type: currentFilter.dataType,
-          setCurrentField,
-          currentFilter,
-          filters,
-          resetPopover: () => {
-            setSubMenuContent({
-              show: false,
-              type: ""
-            });
-          }
-        }
-      )
-    ))
-  ));
-};
-const PopoverFields = ({
-  type,
-  setCurrentField,
-  filters,
-  currentFilter,
-  resetPopover
-}) => {
-  var _a, _b, _c;
-  React.useState(
-    string.parseDate(dayjs_min.default().format("YYYY-MM-DD"))
-  );
-  switch (type) {
-    case "DATE_TIME":
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = index.operatorOptions) == null ? void 0 : _a.filter((operator) => operator.isDateOnly).map((option) => /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          key: option.id,
-          onClick: () => {
-            setCurrentField(
-              option.value,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "comparator"
-            );
-            resetPopover();
-          },
-          css: {
-            padding: "$3 $6",
-            cursor: "pointer",
-            "&:hover": {
-              background: "rgba(100, 116, 139, 0.08)"
-            }
-          }
-        },
-        option.label
-      )));
-    case "BOOLEAN":
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = index.operatorOptions) == null ? void 0 : _b.filter((operator) => (operator == null ? void 0 : operator.type) === "BOOLEAN").map((option) => /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          key: option.id,
-          onClick: () => {
-            setCurrentField(
-              option.value,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "comparator"
-            );
-            resetPopover();
-          },
-          css: {
-            padding: "$3 $6",
-            cursor: "pointer",
-            "&:hover": {
-              background: "rgba(100, 116, 139, 0.08)"
-            }
-          }
-        },
-        option.label
-      )));
-    default:
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_c = index.operatorOptions) == null ? void 0 : _c.filter((operator) => !operator.isDateOnly).map((option) => /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          key: option.id,
-          onClick: () => {
-            setCurrentField(
-              option.value,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "comparator"
-            );
-            resetPopover();
-          },
-          css: {
-            padding: "$3 $6",
-            cursor: "pointer",
-            "&:hover": {
-              background: "rgba(100, 116, 139, 0.08)"
-            }
-          }
-        },
-        option.label
-      )));
-  }
-};
-const FieldPopover = ({
-  setCurrentField,
-  currentFilter,
-  filters,
-  fieldOptions
-}) => {
-  const [inputSearch, setInputSearch] = React.useState("");
-  const currentOptions = fieldOptions == null ? void 0 : fieldOptions.filter(
-    (option) => option.label.toLowerCase().includes(inputSearch.toLowerCase())
-  );
-  return /* @__PURE__ */ React.createElement(popover.Popover, { defaultOpen: true }, /* @__PURE__ */ React.createElement(popover.PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(CustomConditonChip, null, "Choose Field"))), /* @__PURE__ */ React.createElement(
-    popover.PopoverContent,
-    {
-      sideOffset: 4,
-      align: "start",
-      css: {
-        paddingBottom: "12px !important",
-        width: 220,
-        borderRadius: "$xl",
-        border: "0.7px solid $black300",
-        padding: "0"
-      }
-    },
-    /* @__PURE__ */ React.createElement(box.Box, { css: { padding: "$4" } }, /* @__PURE__ */ React.createElement(
-      input.Input,
-      {
-        placeholder: "Search",
-        leftIcon: /* @__PURE__ */ React.createElement(search.SearchIcon, null),
-        variant: "filled",
-        size: "lg",
-        value: inputSearch,
-        onChange: (e) => setInputSearch(e.currentTarget.value)
-      }
-    )),
-    /* @__PURE__ */ React.createElement(
-      flex.Flex,
-      {
-        flexDirection: "column",
-        css: {
-          paddingBottom: "$4",
-          maxHeight: 240,
-          height: "100%",
-          overflow: "auto"
-        }
-      },
-      !!currentOptions.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, currentOptions.map((field) => /* @__PURE__ */ React.createElement(
-        box.Box,
-        {
-          onClick: () => {
-            setCurrentField(
-              field.value,
-              currentFilter == null ? void 0 : currentFilter.id,
-              filters == null ? void 0 : filters.id,
-              "field"
-            );
-            if (field == null ? void 0 : field.type) {
-              setCurrentField(
-                field == null ? void 0 : field.type,
-                currentFilter == null ? void 0 : currentFilter.id,
-                filters == null ? void 0 : filters.id,
-                "dataType"
-              );
-            }
-          },
-          css: {
-            padding: "$3 $6",
-            transition: "all .3s ease",
-            cursor: "pointer",
-            "&:hover": {
-              backgroundColor: "rgba(100, 116, 139, 0.06)"
-            }
-          },
-          key: field == null ? void 0 : field.id
-        },
-        /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, field.label)
-      ))) : /* @__PURE__ */ React.createElement(
-        text.Text,
-        {
-          size: "sm",
-          css: {
-            padding: "$3 $6",
-            color: "$neutral800",
-            textAlign: "center"
-          }
-        },
-        "No options"
-      )
-    )
-  ));
-};
-const CustomConditonChip = ({
-  children,
-  hasError
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    chip.Chip,
-    {
-      size: "lg",
-      css: {
-        backgroundColorOpacity: hasError ? ["#FDEDE8", 1] : ["$primary400", 0.2],
-        color: hasError ? "#E75030" : "$primary700",
-        padding: "$3 $1",
-        fontWeight: "$5",
-        lineHeight: "$sm"
-      }
-    },
-    children
-  );
-};
-const CustomFieldChip = ({
-  children,
-  setCurrentField,
-  currentFilter,
-  filters,
-  setIsEditing,
-  fieldType
-}) => {
-  const renderValue = (children2) => {
-    if (children2 === true) {
-      return "True";
-    }
-    if (children2 === false) {
-      return "False";
-    }
-    return children2;
-  };
-  return /* @__PURE__ */ React.createElement(
-    chip.Chip,
-    {
-      size: "lg",
-      css: {
-        background: "transparent",
-        color: "$neutral800",
-        padding: "$3 $1",
-        fontWeight: "$7",
-        lineHeight: "$sm",
-        cursor: "pointer"
-      },
-      onClick: () => {
-        const fieldsToResetMap = {
-          field: ["field", "comparator", "dataType", "value"],
-          comparator: ["comparator", "dataType", "value"],
-          value: ["value"]
-        };
-        const fieldsToReset = fieldsToResetMap[fieldType] || [
-          "comparator",
-          "dataType",
-          "value"
-        ];
-        fieldsToReset.forEach((field) => {
-          setCurrentField("", currentFilter == null ? void 0 : currentFilter.id, filters == null ? void 0 : filters.id, field);
-        });
-        setIsEditing(true);
-      }
-    },
-    renderValue(children)
-  );
-};
-
-exports.Filter = Filter;
-exports.RenderFieldValuePopover = RenderFieldValuePopover;
-exports.default = getCurrentConditionText;
-//# sourceMappingURL=subcomponents.js.map