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

package/dist/cjs/node_modules/style-to-js/cjs/index.js

@@ -3,7 +3,7 @@
 var _commonjsHelpers = require('../../../_virtual/_commonjsHelpers.js');
 require('../../style-to-object/cjs/index.js');
 require('./utilities.js');
-var index = require('../../../_virtual/index9.js');
+var index = require('../../../_virtual/index8.js');
 var utilities = require('../../../_virtual/utilities3.js');
 
 var __importDefault = (_commonjsHelpers.commonjsGlobal && _commonjsHelpers.commonjsGlobal.__importDefault) || function (mod) {

package/dist/cjs/node_modules/style-to-object/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var _commonjsHelpers = require('../../../_virtual/_commonjsHelpers.js');
-var index$1 = require('../../../_virtual/index9.js');
+var index$1 = require('../../../_virtual/index8.js');
 var index = require('../../inline-style-parser/index.js');
 
 var __importDefault = (_commonjsHelpers.commonjsGlobal && _commonjsHelpers.commonjsGlobal.__importDefault) || function (mod) {

package/dist/cjs/single-mapping/components/Configuration.js

@@ -0,0 +1,165 @@
+'use strict';
+
+var React = require('react');
+var CustomAddNewSelect = require('./CustomAddNewSelect.js');
+var validation_utils = require('../utils/validation.utils.js');
+var index = require('../constants/index.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var formInput = require('../../node_modules/@sparrowengg/twigs-react/dist/es/input/form-input.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var _switch = require('../../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var checkbox = require('../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.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 Configuration = ({
+  field,
+  configuredFields,
+  responseImportType = null
+}) => {
+  var _a, _b;
+  const fieldValue = (_b = (_a = configuredFields == null ? void 0 : configuredFields[field.id]) == null ? void 0 : _a.value) != null ? _b : null;
+  const [error, setError] = React.useState({
+    errorMessage: "",
+    error: false,
+    id: null
+  });
+  const handleInputChange = (value) => {
+    if (field == null ? void 0 : field.pattern) {
+      const validation = validation_utils.validatePattern(value, field.pattern);
+      setError({
+        errorMessage: validation.errorMessage || field.errorMessage || "",
+        error: !validation.isValid,
+        id: field.id
+      });
+    }
+    field.onChangeHandler({
+      id: field.id,
+      value
+    });
+  };
+  const renderInput = () => {
+    var _a2;
+    const shouldShowField = field.id !== index.CONFIGURATION_IDS.SPREADSHEET || ((_a2 = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _a2.value);
+    if (!shouldShowField)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        className: "dm-sans",
+        css: {
+          label: {
+            fontSize: "$xs !important"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        formInput.FormInput,
+        __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+          disabled: field == null ? void 0 : field.disabled
+        }, error.id === field.id && {
+          error: error.errorMessage,
+          errorBorder: error.error
+        }), {
+          label: field.label,
+          value: typeof fieldValue === "object" ? "" : fieldValue || "",
+          size: "lg"
+        }), field.pattern && {
+          pattern: field.pattern
+        }), {
+          onChange: (event) => handleInputChange(event.currentTarget.value)
+        })
+      )
+    );
+  };
+  const renderSelect = () => {
+    var _a2;
+    const shouldShowField = field.id !== index.CONFIGURATION_IDS.SPREADSHEET || ((_a2 = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _a2.value);
+    if (!shouldShowField)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$2",
+        flexDirection: "column",
+        css: {
+          cursor: "pointer !important",
+          ".twigs-select__indicator": {
+            width: "14px !important",
+            color: "#848484 !important"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, field.label),
+      /* @__PURE__ */ React.createElement(CustomAddNewSelect.CustomAddNewSelect, { field })
+    );
+  };
+  const renderSwitch = () => /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      gap: "$4",
+      alignItems: "center",
+      css: {
+        marginBlockStart: "$12",
+        borderTop: "$borderWidths$xs solid $neutral200",
+        paddingTop: "$16"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      _switch.Switch,
+      {
+        disabled: field == null ? void 0 : field.disabled,
+        size: "sm",
+        checked: !!(field == null ? void 0 : field.value),
+        onChange: (value) => field.onChangeHandler({
+          id: field.id,
+          value
+        })
+      }
+    ),
+    /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label)
+  );
+  const renderCheckbox = () => /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+    checkbox.Checkbox,
+    {
+      disabled: field == null ? void 0 : field.disabled,
+      checked: !!fieldValue,
+      onChange: (value) => field.onChangeHandler({
+        id: field.id,
+        value
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
+  switch (field.fieldType) {
+    case "switch":
+      return renderSwitch();
+    case "checkbox":
+      return renderCheckbox();
+    case "input":
+      return renderInput();
+    default:
+      return renderSelect();
+  }
+};
+
+exports.Configuration = Configuration;
+//# sourceMappingURL=Configuration.js.map

package/dist/cjs/single-mapping/components/Configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.js","sources":["../../../../src/single-mapping/components/Configuration.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Flex,\n  Box,\n  Checkbox,\n  FormInput,\n  FormLabel,\n  Switch,\n  Text,\n} from \"@sparrowengg/twigs-react\";\nimport { ConfigurationField, ConfiguredFields } from \"../types/configuration.types\";\nimport { CustomAddNewSelect } from \"./CustomAddNewSelect\";\nimport { validatePattern } from \"../utils/validation.utils\";\nimport { CONFIGURATION_IDS } from \"../constants\";\n\ntype ConfigurationProps = {\n  field: ConfigurationField;\n  configuredFields: ConfiguredFields;\n  responseImportType?: string | null;\n};\n\nexport const Configuration: React.FC<ConfigurationProps> = ({\n  field,\n  configuredFields,\n  responseImportType = null,\n}) => {\n  const fieldValue = configuredFields?.[field.id as string]?.value ?? null;\n\n  const [error, setError] = useState({\n    errorMessage: \"\",\n    error: false,\n    id: null as string | null,\n  });\n\n  const handleInputChange = (value: string) => {\n    if (field?.pattern) {\n      const validation = validatePattern(value, field.pattern);\n      setError({\n        errorMessage: validation.errorMessage || field.errorMessage || \"\",\n        error: !validation.isValid,\n        id: field.id as string,\n      });\n    }\n\n    field.onChangeHandler({\n      id: field.id as string,\n      value: value,\n    });\n  };\n\n  const renderInput = () => {\n    const shouldShowField =\n      field.id !== CONFIGURATION_IDS.SPREADSHEET ||\n      configuredFields?.action?.value;\n\n    if (!shouldShowField) return null;\n\n    return (\n      <Box\n        className=\"dm-sans\"\n        css={{\n          label: {\n            fontSize: \"$xs !important\",\n          },\n        }}\n      >\n        <FormInput\n          disabled={field?.disabled}\n          {...(error.id === field.id && {\n            error: error.errorMessage,\n            errorBorder: error.error,\n          })}\n          label={field.label}\n          value={typeof fieldValue === \"object\" ? \"\" : fieldValue || \"\"}\n          size=\"lg\"\n          {...(field.pattern && {\n            pattern: field.pattern,\n          })}\n          onChange={(event) => handleInputChange(event.currentTarget.value)}\n        />\n      </Box>\n    );\n  };\n\n  const renderSelect = () => {\n    const shouldShowField =\n      field.id !== CONFIGURATION_IDS.SPREADSHEET ||\n      configuredFields?.action?.value;\n\n    if (!shouldShowField) return null;\n\n    return (\n      <Flex\n        gap=\"$2\"\n        flexDirection=\"column\"\n        css={{\n          cursor: \"pointer !important\",\n          \".twigs-select__indicator\": {\n            width: \"14px !important\",\n            color: \"#848484 !important\",\n          },\n        }}\n      >\n        <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n          {field.label}\n        </FormLabel>\n        <CustomAddNewSelect field={field} />\n      </Flex>\n    );\n  };\n\n  const renderSwitch = () => (\n    <Flex\n      gap=\"$4\"\n      alignItems=\"center\"\n      css={{\n        marginBlockStart: \"$12\",\n        borderTop: \"$borderWidths$xs solid $neutral200\",\n        paddingTop: \"$16\",\n      }}\n    >\n      <Switch\n        disabled={field?.disabled}\n        size=\"sm\"\n        checked={!!field?.value}\n        onChange={(value) =>\n          field.onChangeHandler({\n            id: field.id as string,\n            value: value,\n          })\n        }\n      />\n      <Text size=\"md\" weight=\"regular\" css={{ color: \"$neutral900\" }}>\n        {field.label}\n      </Text>\n    </Flex>\n  );\n\n  const renderCheckbox = () => (\n    <Flex flexDirection=\"column\" alignItems=\"start\" gap=\"$4\">\n      <Flex gap=\"$4\" alignItems=\"center\">\n        <Checkbox\n          disabled={field?.disabled}\n          checked={!!fieldValue}\n          onChange={(value) =>\n            field.onChangeHandler({\n              id: field.id as string,\n              value: value,\n            })\n          }\n        />\n        <Text size=\"sm\" weight=\"regular\" css={{ color: \"$neutral900\" }}>\n          {field.label}\n        </Text>\n      </Flex>\n      <Text size=\"sm\" weight=\"regular\" css={{ color: \"$neutral500\" }}>\n        {(field as any).value\n          ? (field as any).ifChecked()\n          : (field as any).ifUnchecked(responseImportType)}\n      </Text>\n    </Flex>\n  );\n\n  switch (field.fieldType) {\n    case \"switch\":\n      return renderSwitch();\n    case \"checkbox\":\n      return renderCheckbox();\n    case \"input\":\n      return renderInput();\n    default:\n      return renderSelect();\n  }\n};\n\n"],"names":["useState","validatePattern","_a","CONFIGURATION_IDS","Box","FormInput","Flex","FormLabel","CustomAddNewSelect","Switch","Text","Checkbox"],"mappings":"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"}

package/dist/cjs/single-mapping/components/ConfigurationSetup.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var Configuration = require('./Configuration.js');
+var CustomDropdown = require('./CustomDropdown.js');
+var index = require('../constants/index.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.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 tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+
+const ConfigurationSetup = ({
+  configuration,
+  surveyName,
+  editField
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: index.STYLES.maxConfigWidth, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, index.UI_LABELS.EVENT_DETAILS), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_LABELS.SURVEY_NAME), /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      content: (surveyName == null ? void 0 : surveyName.length) > 25 ? surveyName : "",
+      css: {
+        zIndex: index.STYLES.zIndexTooltip,
+        fontFamily: "DM Sans !important"
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "medium",
+        truncate: true,
+        css: { color: "$neutral800", maxWidth: "270px" }
+      },
+      surveyName
+    ))
+  )), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      gap: "$8",
+      css: {
+        marginTop: "$12",
+        "& label": {
+          color: "$neutral800"
+        }
+      }
+    },
+    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => /* @__PURE__ */ React.createElement(
+      Configuration.Configuration,
+      {
+        key: field.id,
+        field,
+        configuredFields: configuration.configuredFields
+      }
+    )),
+    configuration.importOptions.showImportOptions && /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$2",
+        flexDirection: "column",
+        css: {
+          marginTop: "-4px !important"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        CustomDropdown.CustomDropdown,
+        {
+          editField,
+          data: configuration.importOptions.options,
+          value: (_d = (_c = (_b = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _b.responseImportType) == null ? void 0 : _c.value) != null ? _d : configuration.importOptions.options[0],
+          onChangeHandler: configuration.importOptions.onChangeHandler
+        }
+      )
+    ),
+    ((_g = (_f = (_e = configuration.configuredFields) == null ? void 0 : _e.responseImportType) == null ? void 0 : _f.value) == null ? void 0 : _g.type) === "date" && /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "regular",
+        css: { color: "$neutral600", marginTop: "-$6" }
+      },
+      index.UI_LABELS.EXISTING_RESPONSES_IMPORTED.replace("{date}", (_j = (_i = (_h = configuration.configuredFields) == null ? void 0 : _h.responseImportType) == null ? void 0 : _i.value) == null ? void 0 : _j.value)
+    ),
+    configuration.importOptions.excludeResponse && ((_m = (_l = (_k = configuration.configuredFields) == null ? void 0 : _k.responseImportType) == null ? void 0 : _l.value) == null ? void 0 : _m.type) === "dateRange" && /* @__PURE__ */ React.createElement(
+      Configuration.Configuration,
+      {
+        field: configuration.importOptions.excludeResponse,
+        configuredFields: configuration.configuredFields,
+        responseImportType: (_q = (_p = (_o = (_n = configuration.configuredFields) == null ? void 0 : _n.responseImportType) == null ? void 0 : _o.value) == null ? void 0 : _p.value) == null ? void 0 : _q.label
+      }
+    )
+  ));
+};
+
+exports.ConfigurationSetup = ConfigurationSetup;
+//# sourceMappingURL=ConfigurationSetup.js.map

package/dist/cjs/single-mapping/components/ConfigurationSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationSetup.js","sources":["../../../../src/single-mapping/components/ConfigurationSetup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Heading, Flex, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport { ConfigurationSetupProps } from \"../types/mapping.types\";\nimport { Configuration } from \"./Configuration\";\nimport { CustomDropdown } from \"./CustomDropdown\";\nimport { STYLES, UI_LABELS } from \"../constants\";\n\nexport const ConfigurationSetup: React.FC<ConfigurationSetupProps> = ({\n  configuration,\n  surveyName,\n  editField,\n}) => {\n  return (\n    <Box css={{ maxWidth: STYLES.maxConfigWidth, width: \"100%\" }}>\n      <Heading size=\"h5\">{UI_LABELS.EVENT_DETAILS}</Heading>\n      <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n        <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n          {UI_LABELS.SURVEY_NAME}\n        </Text>\n        <Tooltip\n          content={surveyName?.length > 25 ? surveyName : \"\"}\n          css={{\n            zIndex: STYLES.zIndexTooltip,\n            fontFamily: \"DM Sans !important\",\n          }}\n        >\n          <Box>\n            <Text\n              size=\"sm\"\n              weight=\"medium\"\n              truncate\n              css={{ color: \"$neutral800\", maxWidth: \"270px\" }}\n            >\n              {surveyName}\n            </Text>\n          </Box>\n        </Tooltip>\n      </Flex>\n\n      <Flex\n        flexDirection=\"column\"\n        gap=\"$8\"\n        css={{\n          marginTop: \"$12\",\n          \"& label\": {\n            color: \"$neutral800\",\n          },\n        }}\n      >\n        {configuration.configurationFields?.map((field: any) => (\n          <Configuration\n            key={field.id}\n            field={field}\n            configuredFields={configuration.configuredFields}\n          />\n        ))}\n\n        {configuration.importOptions.showImportOptions && (\n          <Flex\n            gap=\"$2\"\n            flexDirection=\"column\"\n            css={{\n              marginTop: \"-4px !important\",\n            }}\n          >\n            <CustomDropdown\n              editField={editField}\n              data={configuration.importOptions.options}\n              value={\n                configuration?.configuredFields?.responseImportType?.value ??\n                configuration.importOptions.options[0]\n              }\n              onChangeHandler={configuration.importOptions.onChangeHandler}\n            />\n          </Flex>\n        )}\n\n        {configuration.configuredFields?.responseImportType?.value?.type ===\n          \"date\" && (\n          <Text\n            size=\"sm\"\n            weight=\"regular\"\n            css={{ color: \"$neutral600\", marginTop: \"-$6\" }}\n          >\n            {UI_LABELS.EXISTING_RESPONSES_IMPORTED.replace('{date}', configuration.configuredFields?.responseImportType?.value?.value)}\n          </Text>\n        )}\n\n        {configuration.importOptions.excludeResponse &&\n          configuration.configuredFields?.responseImportType?.value?.type ===\n            \"dateRange\" && (\n            <Configuration\n              field={configuration.importOptions.excludeResponse}\n              configuredFields={configuration.configuredFields}\n              responseImportType={\n                configuration.configuredFields?.responseImportType?.value?.value\n                  ?.label\n              }\n            />\n          )}\n      </Flex>\n    </Box>\n  );\n};\n\n"],"names":["Box","STYLES","Heading","UI_LABELS","Flex","Text","Tooltip","Configuration","CustomDropdown"],"mappings":"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"}

package/dist/cjs/single-mapping/components/CustomAddNewSelect.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var index = require('../constants/index.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var tooltip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var indexA301f526_esm = require('../../node_modules/react-select/dist/index-a301f526.esm.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var plus = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js');
+var tickCircleFill = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/tick-circle-fill.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 CustomAddNewSelect = ({
+  field
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    select.Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: "",
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: (value) => {
+        var _a, _b;
+        field.onChangeHandler({
+          id: (_b = (_a = field == null ? void 0 : field.id) == null ? void 0 : _a.toString()) != null ? _b : field == null ? void 0 : field.label,
+          value
+        });
+      },
+      options: field.options
+    }
+  );
+};
+const CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || "",
+        css: {
+          zIndex: index.STYLES.zIndexTooltip,
+          fontFamily: "DM Sans !important"
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: 999999999 }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }),
+          index.UI_LABELS.ADD_ACCOUNT
+        )
+      )))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { cursor: "pointer", zIndex: 999999999 },
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$2"
+    },
+    /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label),
+    props.data.isAddonAccount && /* @__PURE__ */ React.createElement(chip.Chip, { color: "primary", size: "sm", leftElement: /* @__PURE__ */ React.createElement(tickCircleFill.TickCircleFillIcon, null) }, index.UI_LABELS.IN_USE_ADDON)
+  ));
+};
+const CustomSingleValue = (props) => {
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, props.data.value === "ADD_NEW" && /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+};
+
+exports.CustomAddNewSelect = CustomAddNewSelect;
+//# sourceMappingURL=CustomAddNewSelect.js.map

package/dist/cjs/single-mapping/components/CustomAddNewSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/single-mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Select, Flex, Text, Tooltip, Box, Chip } from \"@sparrowengg/twigs-react\";\nimport { components, OptionProps, SingleValueProps } from \"react-select\";\nimport { PlusIcon, TickCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { ConfigurationField } from \"../types/configuration.types\";\nimport { STYLES, UI_LABELS } from \"../constants\";\n\ntype CustomAddNewSelectProps = {\n  field: ConfigurationField;\n};\n\nexport const CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({\n  field,\n}) => {\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder=\"\"\n      size=\"lg\"\n      css={{\n        cursor: \"pointer\",\n      }}\n      components={{\n        Option: CustomShareOption,\n        SingleValue: CustomSingleValue,\n      }}\n      styles={{\n        singleValue: (provided) => ({\n          ...provided,\n          display: \"flex\",\n          alignItems: \"center\",\n          cursor: \"pointer\",\n        }),\n      }}\n      value={field.value}\n      onChange={(value) => {\n        field.onChangeHandler({\n          id: field?.id?.toString() ?? field?.label,\n          value: value,\n        });\n      }}\n      options={field.options}\n    />\n  );\n};\n\nconst CustomShareOption: React.FC<OptionProps<any>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <Tooltip\n        content={props.data.tooltip || \"\"}\n        css={{\n          zIndex: STYLES.zIndexTooltip,\n          fontFamily: \"DM Sans !important\",\n        }}\n      >\n        <Box>\n          <components.Option {...props}>\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ cursor: \"pointer\", zIndex: 999999999 }}\n            >\n              <Flex\n                gap=\"$2\"\n                alignItems=\"center\"\n                css={{\n                  color: \"$primary500\",\n                  fontSize: \"$sm\",\n                  fontWeight: \"$7\",\n                }}\n              >\n                <PlusIcon size={16} color=\"#4A9CA6\" />\n                {UI_LABELS.ADD_ACCOUNT}\n              </Flex>\n            </Flex>\n          </components.Option>\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <components.Option {...props}>\n      <Flex\n        css={{ cursor: \"pointer\", zIndex: 999999999 }}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        gap=\"$2\"\n      >\n        <Text size=\"sm\">{props.label}</Text>\n        {props.data.isAddonAccount && (\n          <Chip color=\"primary\" size=\"sm\" leftElement={<TickCircleFillIcon />}>\n            {UI_LABELS.IN_USE_ADDON}\n          </Chip>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n\nconst CustomSingleValue: React.FC<SingleValueProps<any>> = (props) => {\n  return (\n    <components.SingleValue {...props}>\n      <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n        {props.data.value === \"ADD_NEW\" && <PlusIcon size={16} />}\n        <Text size=\"sm\">{props.data.label}</Text>\n      </Flex>\n    </components.SingleValue>\n  );\n};\n\n"],"names":["Select","Tooltip","STYLES","Box","components","Flex","PlusIcon","UI_LABELS","Text","Chip","TickCircleFillIcon"],"mappings":"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"}

package/dist/cjs/single-mapping/components/CustomChip.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var React = require('react');
+var chip = require('../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.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 CustomChip = ({
+  children,
+  bgColor,
+  opacity
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    chip.Chip,
+    {
+      variant: "solid",
+      css: __spreadProps(__spreadValues(__spreadValues({}, opacity && { backgroundColor: bgColor }), opacity && { backgroundColorOpacity: [bgColor, 0.3] }), {
+        background: bgColor,
+        lineHeight: "$sm",
+        fontWeight: "$4",
+        fontFamily: "'Roboto Mono', monospace !important",
+        "& > * ": {
+          fontFamily: "'Roboto Mono', monospace !important",
+          fontWeight: "$4 !important"
+        }
+      })
+    },
+    children
+  );
+};
+
+exports.CustomChip = CustomChip;
+//# sourceMappingURL=CustomChip.js.map

package/dist/cjs/single-mapping/components/CustomChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomChip.js","sources":["../../../../src/single-mapping/components/CustomChip.tsx"],"sourcesContent":["import React from \"react\";\nimport { Chip } from \"@sparrowengg/twigs-react\";\n\ntype CustomChipProps = {\n  children: React.ReactNode;\n  bgColor: string;\n  opacity?: number;\n};\n\nexport const CustomChip: React.FC<CustomChipProps> = ({\n  children,\n  bgColor,\n  opacity,\n}) => {\n  return (\n    <Chip\n      variant=\"solid\"\n      css={{\n        ...(opacity && { backgroundColor: bgColor }),\n        ...(opacity && { backgroundColorOpacity: [bgColor, 0.3] }),\n        background: bgColor,\n        lineHeight: \"$sm\",\n        fontWeight: \"$4\",\n        fontFamily: \"'Roboto Mono', monospace !important\",\n        \"& > * \": {\n          fontFamily: \"'Roboto Mono', monospace !important\",\n          fontWeight: \"$4 !important\",\n        },\n      }}\n    >\n      {children}\n    </Chip>\n  );\n};\n\n"],"names":["Chip"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,aAAwC,CAAC;AAAA,EACpD,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,OAAA;AAAA,MACR,GAAK,EAAA,aAAA,CAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EACC,OAAW,IAAA,EAAE,iBAAiB,OAAQ,EAAA,CAAA,EACtC,OAAW,IAAA,EAAE,sBAAwB,EAAA,CAAC,OAAS,EAAA,GAAG,GAFnD,CAAA,EAAA;AAAA,QAGH,UAAY,EAAA,OAAA;AAAA,QACZ,UAAY,EAAA,KAAA;AAAA,QACZ,UAAY,EAAA,IAAA;AAAA,QACZ,UAAY,EAAA,qCAAA;AAAA,QACZ,QAAU,EAAA;AAAA,UACR,UAAY,EAAA,qCAAA;AAAA,UACZ,UAAY,EAAA,eAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA;AAEJ;;;;"}