@sparrowengg/integrations-templates-frontend 2.1.0-notion-release.18 → 2.1.0-notion-release.19

package/dist/es/commons/components/MappingCondtion/conditionWrapper.js

@@ -0,0 +1,608 @@
+import React__default, { useState, useImperativeHandle, useEffect } from 'react';
+import { CascaderDropdown } from '../../../cascader-dropdown/cascader-dropdown.js';
+import { initialFilterValueSelectorValue } from '../../../cascader-dropdown/helpers/cascader-dropdown-constants.js';
+import { prefixClassName } from '../../../cascader-dropdown/styled/StyledItem.js';
+import { FilterPillWithoutOperator, FilterPill } from '../../../filter/filter-pill.js';
+import { TooltipProvider, Tooltip } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Text } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js';
+import { Button } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { ChevronDownIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js';
+import { IconButton } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { DeleteIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js';
+import { PlusIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.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 SurveyIcon = () => {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M7.5 3.75H5.625C4.58947 3.75 3.75 4.58947 3.75 5.625V15.625C3.75 16.6605 4.58947 17.5 5.625 17.5H14.375C15.4105 17.5 16.25 16.6605 16.25 15.625V5.625C16.25 4.58947 15.4105 3.75 14.375 3.75H12.5M7.5 3.75C7.5 4.44036 8.05964 5 8.75 5H11.25C11.9404 5 12.5 4.44036 12.5 3.75M7.5 3.75C7.5 3.05964 8.05964 2.5 8.75 2.5H11.25C11.9404 2.5 12.5 3.05964 12.5 3.75M9.36498 8.80859L7.91023 10.1926L6.87164 9.25765M9.36498 12.5586L7.91023 13.9426L6.87164 13.0077M11.875 9.375H13.125M11.875 13.125H13.125",
+        stroke: "#6A6A6A",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    )
+  );
+};
+const ContactPropertyIcon = () => {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M12.4379 13.5662C11.9487 12.074 10.6519 10.6642 9.32857 10.6644H6.69988C5.87888 10.6643 5.08868 11.0437 4.49002 11.7256C4.14406 12.1194 3.87379 12.6009 3.69843 13.1357L3.55654 13.5662M4.66293 13.9976H11.3318C12.804 13.9976 13.9974 12.8042 13.9974 11.332V4.66311C13.9974 3.19097 12.804 1.99756 11.3318 1.99756H4.66293C3.19079 1.99756 1.99738 3.19097 1.99738 4.66311V11.332C1.99738 12.8041 3.19078 13.9976 4.66293 13.9976ZM7.99738 8.61347C7.15264 8.61347 6.46784 7.92867 6.46784 7.08393V6.82017C6.46784 5.97543 7.15264 5.29063 7.99738 5.29063C8.84212 5.29063 9.52691 5.97543 9.52691 6.82017V7.08393C9.52691 7.92867 8.84212 8.61347 7.99738 8.61347Z",
+        stroke: "#575757",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+};
+const VariablesIcon = () => {
+  return /* @__PURE__ */ React__default.createElement(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "path",
+      {
+        d: "M8 3V1.5M8 12.3633V13.8633M5.39767 11.0591C5.58659 11.3837 5.85679 11.6536 6.18171 11.8422C6.50663 12.0308 6.87508 12.1317 7.25084 12.1349H8.89487C9.40877 12.1345 9.90479 11.9464 10.2896 11.606C10.6744 11.2657 10.9214 10.7965 10.9842 10.2869C11.047 9.77721 10.9212 9.2622 10.6305 8.83876C10.3398 8.41533 9.90419 8.11266 9.40573 7.98774L6.59427 7.282C6.09581 7.15707 5.66024 6.85441 5.36952 6.43097C5.07881 6.00754 4.953 5.49253 5.01579 4.98287C5.07857 4.47322 5.32561 4.00407 5.71041 3.66372C6.09521 3.32336 6.59123 3.13528 7.10513 3.13487H8.74916C9.1242 3.13747 9.49211 3.23754 9.81672 3.42525C10.1413 3.61296 10.4115 3.88184 10.6006 4.20547",
+        stroke: "#575757",
+        strokeWidth: "1.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+};
+const connectorOptionsMap = {
+  AND: "and",
+  OR: "or"
+};
+const connectorOptions = Object.keys(connectorOptionsMap).map((key) => ({
+  label: connectorOptionsMap[key],
+  value: key
+}));
+const allAnyOptionsMap = {
+  ALL: "all",
+  ANY: "any"
+};
+const allAnyOptions = Object.keys(allAnyOptionsMap).map((key) => ({
+  label: allAnyOptionsMap[key],
+  value: key
+}));
+const PillIconMap = {
+  contactProperties: ContactPropertyIcon,
+  variables: VariablesIcon,
+  surveys: SurveyIcon
+};
+const ConditionWrapper = React__default.forwardRef(({ existingContions, setExistingCondtions, onConditionsChange, conditionData }, ref) => {
+  const [conditionsData, setConditionsData] = useState({
+    globalConnector: "ALL",
+    filterGroups: []
+  });
+  const [showError, setShowError] = useState(/* @__PURE__ */ new Set());
+  const updateFilters = (group, filterPillValue, filterIndex) => {
+    const newFilters = group.filters.map((loopFilter, loopFilterIndex) => {
+      if (loopFilterIndex === filterIndex)
+        return filterPillValue;
+      return loopFilter;
+    });
+    return __spreadProps(__spreadValues({}, group), {
+      filters: newFilters
+    });
+  };
+  const replaceFilterPillData = (filterPillValue, groupIndex, filterIndex) => {
+    setShowError((prev) => {
+      prev.delete(
+        `${filterPillValue.property.value}-${groupIndex}-${filterIndex}`
+      );
+      return prev;
+    });
+    setConditionsData((prev) => __spreadProps(__spreadValues({}, prev), {
+      filterGroups: prev.filterGroups.map((loopGroup, loopGroupIndex) => {
+        if (loopGroupIndex !== groupIndex)
+          return loopGroup;
+        return updateFilters(loopGroup, filterPillValue, filterIndex);
+      })
+    }));
+  };
+  const addCondition = (selectedProperty) => {
+    setShowError(/* @__PURE__ */ new Set());
+    if (!selectedProperty)
+      return;
+    setConditionsData((prev) => {
+      const newData = __spreadProps(__spreadValues({}, prev), {
+        filterGroups: [
+          ...prev.filterGroups,
+          {
+            filters: [
+              {
+                comparator: "AND",
+                property: selectedProperty,
+                value: initialFilterValueSelectorValue
+              }
+            ]
+          }
+        ]
+      });
+      onConditionsChange(newData.filterGroups.length);
+      return newData;
+    });
+  };
+  const insertCondition = (selectedProperty, groupIndex, filterIndex) => {
+    setShowError(/* @__PURE__ */ new Set());
+    setConditionsData((prev) => __spreadProps(__spreadValues({}, prev), {
+      filterGroups: [
+        ...prev.filterGroups.slice(0, groupIndex),
+        {
+          filters: [
+            ...prev.filterGroups[groupIndex].filters.slice(0, filterIndex + 1),
+            {
+              comparator: "AND",
+              property: selectedProperty,
+              value: initialFilterValueSelectorValue
+            },
+            ...prev.filterGroups[groupIndex].filters.slice(filterIndex + 1)
+          ]
+        },
+        ...prev.filterGroups.slice(groupIndex + 1)
+      ]
+    }));
+  };
+  const filterConditions = (group, filterIndex) => {
+    return __spreadProps(__spreadValues({}, group), {
+      filters: group.filters.filter(
+        (_, loopFilterIndex) => loopFilterIndex !== filterIndex
+      )
+    });
+  };
+  const deleteCondition = (groupIndex, filterIndex) => {
+    setShowError(/* @__PURE__ */ new Set());
+    setConditionsData((prev) => {
+      const updatedGroup = filterConditions(
+        prev.filterGroups[groupIndex],
+        filterIndex
+      );
+      let newData;
+      if (updatedGroup.filters.length === 0) {
+        newData = __spreadProps(__spreadValues({}, prev), {
+          filterGroups: prev.filterGroups.filter(
+            (_, loopGroupIndex) => loopGroupIndex !== groupIndex
+          )
+        });
+      } else {
+        newData = __spreadProps(__spreadValues({}, prev), {
+          filterGroups: prev.filterGroups.map((group, loopGroupIndex) => {
+            if (loopGroupIndex !== groupIndex)
+              return group;
+            return updatedGroup;
+          })
+        });
+      }
+      onConditionsChange(newData.filterGroups.length);
+      return newData;
+    });
+  };
+  const deleteGroup = (groupIndex) => {
+    setShowError(/* @__PURE__ */ new Set());
+    setConditionsData((prev) => {
+      const newData = __spreadProps(__spreadValues({}, prev), {
+        filterGroups: prev.filterGroups.filter(
+          (_, loopGroupIndex) => loopGroupIndex !== groupIndex
+        )
+      });
+      onConditionsChange(newData.filterGroups.length);
+      return newData;
+    });
+  };
+  const onGlobalConnectorChange = (value) => {
+    setConditionsData((prev) => __spreadProps(__spreadValues({}, prev), {
+      globalConnector: value
+    }));
+  };
+  const updateFilterInGroup = (group, filterIndex, newComparator) => {
+    return __spreadProps(__spreadValues({}, group), {
+      filters: group.filters.map((filter, loopFilterIndex) => {
+        if (loopFilterIndex !== filterIndex)
+          return filter;
+        return __spreadProps(__spreadValues({}, filter), {
+          comparator: newComparator
+        });
+      })
+    });
+  };
+  const onComparatorChange = (value, groupIndex, filterIndex) => {
+    setConditionsData((prev) => __spreadProps(__spreadValues({}, prev), {
+      filterGroups: prev.filterGroups.map((group, loopGroupIndex) => {
+        if (loopGroupIndex !== groupIndex)
+          return group;
+        return updateFilterInGroup(group, filterIndex, value);
+      })
+    }));
+  };
+  const handleSave = () => {
+    setExistingCondtions(conditionsData);
+    console.log(conditionsData);
+    const errorSet = /* @__PURE__ */ new Set();
+    conditionsData.filterGroups.forEach((group, groupIndex) => {
+      group.filters.forEach((filter, filterIndex) => {
+        if (!filter.connector || !filter.value[filter.connector.dataType]) {
+          errorSet.add(`${filter.property.value}-${groupIndex}-${filterIndex}`);
+        }
+      });
+    });
+    setShowError(errorSet);
+  };
+  useImperativeHandle(ref, () => ({
+    handleSave
+  }));
+  useEffect(() => {
+    var _a;
+    if (existingContions) {
+      setConditionsData(existingContions);
+      onConditionsChange(((_a = existingContions.filterGroups) == null ? void 0 : _a.length) || 0);
+    }
+  }, [existingContions, onConditionsChange]);
+  return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      gap: "$2",
+      css: {
+        width: "100%",
+        ".twigs-cascader-dropdown": {
+          zIndex: "999999 !important"
+        }
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Box, { css: { margin: "0 0 $6 0", width: "100%" } }, /* @__PURE__ */ React__default.createElement(Flex, null, /* @__PURE__ */ React__default.createElement(Text, { size: "md", css: { color: "$neutral900" } }, "Which meet", /* @__PURE__ */ React__default.createElement(Box, { as: "span", css: { display: "inline-block", margin: "0 $2" } }, /* @__PURE__ */ React__default.createElement(DropdownMenu, { size: "sm" }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        rightIcon: /* @__PURE__ */ React__default.createElement(ChevronDownIcon, null),
+        size: "sm",
+        variant: "ghost",
+        color: "default",
+        css: {
+          "& span": {
+            fontFamily: "DM Sans !important"
+          },
+          height: "$7",
+          paddingRight: "0",
+          fontWeight: "$7"
+        }
+      },
+      allAnyOptionsMap[conditionsData.globalConnector]
+    )), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuContent,
+      {
+        align: "start",
+        css: { zIndex: "1000", minWidth: "100px" }
+      },
+      allAnyOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+        DropdownMenuItem,
+        {
+          onClick: () => onGlobalConnectorChange(option.value),
+          key: option.value,
+          css: __spreadValues({
+            cursor: "pointer"
+          }, conditionsData.globalConnector === option.value && {
+            "&, &:hover": {
+              backgroundColorOpacity: ["$primary200", 0.08]
+            }
+          })
+        },
+        option.label
+      ))
+    ))), "of these conditions:")), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$1", css: { maxWidth: "600px" } }, conditionsData.filterGroups.map((group, groupIndex) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ React__default.createElement(Group, { key: groupIndex }, /* @__PURE__ */ React__default.createElement(GroupTitle, { onDelete: () => deleteGroup(groupIndex) }, "When"), group.filters.map((filter, filterIndex) => {
+        var _a, _b, _c, _d, _e, _f;
+        const selectedRootProperty = (_b = (_a = filter.property.selectionPath) == null ? void 0 : _a[0]) == null ? void 0 : _b.value;
+        const Icon = PillIconMap[selectedRootProperty];
+        const key = `${(_d = (_c = filter.property.operators) == null ? void 0 : _c[0]) == null ? void 0 : _d.value}-${groupIndex}-${filterIndex}`;
+        return /* @__PURE__ */ React__default.createElement(
+          Flex,
+          {
+            key: filter.property.value,
+            alignItems: "center",
+            gap: "$1",
+            css: {
+              "&:hover, &:focus, &:active, &:focus-visible": {
+                [`.${prefixClassName("add-condition-in-group-button")}`]: {
+                  opacity: "1"
+                }
+              }
+            }
+          },
+          filterIndex > 0 && /* @__PURE__ */ React__default.createElement(
+            ComparatorDropdown,
+            {
+              filter,
+              onComparatorChange: (value) => onComparatorChange(value, groupIndex, filterIndex)
+            }
+          ),
+          ((_e = filter.property.operators) == null ? void 0 : _e.length) === 1 ? /* @__PURE__ */ React__default.createElement(
+            FilterPillWithoutOperator,
+            {
+              key,
+              data: filter.property.operators[0],
+              filterPillData: conditionsData.filterGroups[groupIndex].filters[filterIndex],
+              setFilterPillData: (filterPillValue) => replaceFilterPillData(
+                filterPillValue,
+                groupIndex,
+                filterIndex
+              ),
+              icon: Icon && /* @__PURE__ */ React__default.createElement(Icon, null),
+              onDelete: () => deleteCondition(groupIndex, filterIndex),
+              variant: "outline",
+              showError: showError.has(
+                `${filter.property.value}-${groupIndex}-${filterIndex}`
+              )
+            }
+          ) : /* @__PURE__ */ React__default.createElement(
+            FilterPill,
+            {
+              key,
+              cascaderDropdownData: (_f = filter.property.operators) != null ? _f : [],
+              filterPillData: conditionsData.filterGroups[groupIndex].filters[filterIndex],
+              setFilterPillData: (filterPillValue) => replaceFilterPillData(
+                filterPillValue,
+                groupIndex,
+                filterIndex
+              ),
+              onDelete: () => deleteCondition(groupIndex, filterIndex),
+              variant: "outline",
+              icon: Icon && /* @__PURE__ */ React__default.createElement(Icon, null),
+              showError: showError.has(
+                `${filter.property.value}-${groupIndex}-${filterIndex}`
+              )
+            }
+          ),
+          /* @__PURE__ */ React__default.createElement(
+            AddConditionInGroupButton,
+            {
+              conditionData,
+              insertCondition: (selectedProperty) => insertCondition(
+                selectedProperty,
+                groupIndex,
+                filterIndex
+              )
+            }
+          )
+        );
+      }))
+    )), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4", css: { marginTop: "$6", marginLeft: "-$2" } }, /* @__PURE__ */ React__default.createElement(
+      AddConditionButton,
+      {
+        conditionData,
+        onAdd: (selectedProperty) => {
+          addCondition(selectedProperty);
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          leftIcon: /* @__PURE__ */ React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React__default.createElement("path", { d: "M2.05371 3H13.2504M2.05371 6.5H13.2504M2.05371 10H6.75038M11.0004 14.3333V9.66667M13.3337 12H8.66705", stroke: "#64748B", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })),
+          color: "secondary",
+          variant: "ghost",
+          css: {
+            height: "auto",
+            minWidth: "fit-content",
+            "& span": {
+              fontFamily: "DM Sans !important"
+            }
+          }
+        },
+        "Add group"
+      )
+    ), /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          width: "100%",
+          borderBottom: "2px dashed $secondary100"
+        }
+      }
+    ))))
+  ));
+});
+ConditionWrapper.displayName = "ConditionWrapper";
+const Group = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement(Flex, { css: { padding: "$4 0" }, flexDirection: "column", gap: "$2" }, children);
+};
+const GroupTitle = ({
+  children,
+  onDelete
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: { padding: "$1 0" },
+      gap: "$2"
+    },
+    /* @__PURE__ */ React__default.createElement(Text, { weight: "bold", css: { color: "$secondary900" } }, children),
+    /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          height: "1px",
+          width: "100%",
+          backgroundColor: "$black100",
+          flex: "1"
+        }
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Remove Group", css: { zIndex: "99999" } }, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        css: { height: "$5", width: "$5" },
+        variant: "ghost",
+        color: "default",
+        icon: /* @__PURE__ */ React__default.createElement(DeleteIcon, null),
+        onClick: onDelete
+      }
+    ))
+  );
+};
+const AddConditionButton = ({
+  conditionData,
+  children,
+  onAdd,
+  dropdownContentProps,
+  tooltipProps
+}) => {
+  const onChange = ({
+    selectedProperty,
+    selectionPath
+  }) => {
+    if (!(selectedProperty == null ? void 0 : selectedProperty.label) || !(selectedProperty == null ? void 0 : selectedProperty.value))
+      return;
+    onAdd(__spreadProps(__spreadValues({}, selectedProperty), { selectionPath }));
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    CascaderDropdown,
+    {
+      data: conditionData,
+      dropdownContentProps: __spreadValues({ align: "start" }, dropdownContentProps),
+      onChange,
+      tooltipProps
+    },
+    children
+  );
+};
+const ComparatorDropdown = ({
+  filter,
+  onComparatorChange
+}) => {
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu, { size: "sm" }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      rightIcon: /* @__PURE__ */ React__default.createElement(ChevronDownIcon, null),
+      size: "sm",
+      variant: "ghost",
+      color: "default",
+      css: {
+        height: "$7",
+        fontWeight: "$4",
+        color: "$neutral800",
+        paddingRight: "$1",
+        paddingLeft: "$2"
+      }
+    },
+    connectorOptionsMap[filter.comparator]
+  )), /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent,
+    {
+      align: "start",
+      css: { zIndex: "1000", minWidth: "100px" }
+    },
+    connectorOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+      DropdownMenuItem,
+      {
+        key: option.value,
+        onClick: () => onComparatorChange(option.value),
+        css: __spreadValues({
+          cursor: "pointer"
+        }, filter.comparator === option.value && {
+          "&, &:hover": {
+            backgroundColorOpacity: ["$primary200", 0.08]
+          }
+        })
+      },
+      option.label
+    ))
+  ));
+};
+const AddConditionInGroupButton = ({
+  conditionData,
+  insertCondition
+}) => {
+  const handleAddCondition = (selectedProperty) => {
+    if (!selectedProperty)
+      return;
+    insertCondition(selectedProperty);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    AddConditionButton,
+    {
+      conditionData,
+      onAdd: handleAddCondition,
+      tooltipProps: {
+        content: "Add condition",
+        side: "right",
+        css: { zIndex: "99999" }
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        className: prefixClassName("add-condition-in-group-button"),
+        size: "md",
+        css: {
+          height: "$6",
+          width: "$6",
+          borderRadius: "$sm",
+          border: "1px dashed $black300",
+          opacity: "0",
+          transition: "opacity 0.2s ease-in-out",
+          marginLeft: "$3",
+          "&:hover, &:focus, &:active, &:focus-visible": {
+            opacity: 1
+          }
+        },
+        icon: /* @__PURE__ */ React__default.createElement(PlusIcon, null),
+        color: "default",
+        variant: "ghost"
+      }
+    )
+  );
+};
+
+export { ConditionWrapper as default };
+//# sourceMappingURL=conditionWrapper.js.map