@sparrowengg/integrations-templates-frontend 2.1.0-notion-release.34 → 2.1.0-notion-release.35

package/dist/cjs/mapping/components/ConfigurationField.js

@@ -0,0 +1,178 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var CustomAddNewSelect = require('./CustomAddNewSelect.js');
+var validation_utils = require('../utils/validation.utils.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.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 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 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 ConfigurationField = ({
+  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 = (event) => {
+    const value = event.currentTarget.value;
+    if (field == null ? void 0 : field.pattern) {
+      const isValid = validation_utils.validatePattern(field.pattern, value);
+      if (!isValid && value !== "") {
+        setError({
+          errorMessage: field.errorMessage,
+          error: true,
+          id: field.id
+        });
+      } else {
+        setError({
+          errorMessage: "",
+          error: false,
+          id: null
+        });
+      }
+    }
+    field.onChangeHandler({
+      id: field.id,
+      value
+    });
+  };
+  const renderSwitchField = () => /* @__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 renderCheckboxField = () => {
+    var _a2, _b2;
+    return /* @__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 ? (_a2 = field.ifChecked) == null ? void 0 : _a2.call(field) : (_b2 = field.ifUnchecked) == null ? void 0 : _b2.call(field, responseImportType)));
+  };
+  const renderInputField = () => {
+    var _a2;
+    const shouldRenderField = (field == null ? void 0 : field.id) !== "spreadsheet" || ((_a2 = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _a2.value);
+    if (!shouldRenderField)
+      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: handleInputChange
+        })
+      )
+    );
+  };
+  const renderSelectField = () => {
+    var _a2;
+    const shouldRenderField = field.id !== "spreadsheet" || ((_a2 = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _a2.value);
+    if (!shouldRenderField)
+      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.default, { field })
+    );
+  };
+  switch (field.fieldType) {
+    case "switch":
+      return renderSwitchField();
+    case "checkbox":
+      return renderCheckboxField();
+    case "input":
+      return renderInputField();
+    default:
+      return renderSelectField();
+  }
+};
+
+exports.default = ConfigurationField;
+//# sourceMappingURL=ConfigurationField.js.map

package/dist/cjs/mapping/components/ConfigurationField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationField.js","sources":["../../../../src/mapping/components/ConfigurationField.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Box,\n  Checkbox,\n  Flex,\n  FormInput,\n  FormLabel,\n  Switch,\n  Text,\n} from \"@sparrowengg/twigs-react\";\nimport { ConfigurationFieldProps } from \"../types/configuration.types\";\nimport CustomAddNewSelect from \"./CustomAddNewSelect\";\nimport { validatePattern } from \"../utils\";\n\nconst ConfigurationField: React.FC<ConfigurationFieldProps> = ({\n  field,\n  configuredFields,\n  responseImportType = null,\n}) => {\n  const fieldValue = configuredFields?.[field.id]?.value ?? null;\n  \n  const [error, setError] = useState({\n    errorMessage: \"\",\n    error: false,\n    id: null as string | number | null,\n  });\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const value = event.currentTarget.value;\n    \n    if (field?.pattern) {\n      const isValid = validatePattern(field.pattern, value);\n      \n      if (!isValid && value !== \"\") {\n        setError({\n          errorMessage: field.errorMessage,\n          error: true,\n          id: field.id,\n        });\n      } else {\n        setError({\n          errorMessage: \"\",\n          error: false,\n          id: null,\n        });\n      }\n    }\n    \n    field.onChangeHandler({\n      id: field.id,\n      value: value,\n    });\n  };\n\n  const renderSwitchField = () => (\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,\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 renderCheckboxField = () => (\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,\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.value\n          ? field.ifChecked?.()\n          : field.ifUnchecked?.(responseImportType)}\n      </Text>\n    </Flex>\n  );\n\n  const renderInputField = () => {\n    const shouldRenderField = field?.id !== \"spreadsheet\" || configuredFields?.action?.value;\n    \n    if (!shouldRenderField) 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={handleInputChange}\n        />\n      </Box>\n    );\n  };\n\n  const renderSelectField = () => {\n    const shouldRenderField = field.id !== \"spreadsheet\" || configuredFields?.action?.value;\n    \n    if (!shouldRenderField) 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  switch (field.fieldType) {\n    case \"switch\":\n      return renderSwitchField();\n    case \"checkbox\":\n      return renderCheckboxField();\n    case \"input\":\n      return renderInputField();\n    default:\n      return renderSelectField();\n  }\n};\n\nexport default ConfigurationField;\n\n"],"names":["useState","validatePattern","Flex","Switch","Text","_a","_b","Checkbox","Box","FormInput","FormLabel","CustomAddNewSelect"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
-var Configuration = require('./Configuration.js');
-var index = require('../constants/index.js');
+var ConfigurationField = require('./ConfigurationField.js');
+var uiStrings = require('../constants/ui-strings.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');
@@ -15,14 +17,13 @@ const ConfigurationSetup = ({
   editField
 }) => {
   var _a;
-  const shouldTruncate = surveyName && surveyName.length > index.UI_CONSTANTS.MAX_SURVEY_NAME_LENGTH;
-  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_TEXT.SURVEY_NAME_PREFIX), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, uiStrings.MAPPING_UI_STRINGS.SURVEY_NAME_LABEL), /* @__PURE__ */ React.createElement(
     tooltip.Tooltip,
     {
-      content: shouldTruncate ? surveyName : index.UI_TEXT.EMPTY_PLACEHOLDER,
+      content: (surveyName == null ? void 0 : surveyName.length) > 25 ? surveyName : "",
       css: {
-        zIndex: `${index.UI_CONSTANTS.TOOLTIP_Z_INDEX} !important`,
-        fontFamily: `${index.STYLE_CONSTANTS.FONT_FAMILY} !important`
+        zIndex: "9999999 !important",
+        fontFamily: "DM Sans !important"
       }
     },
     /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
@@ -47,16 +48,18 @@ const ConfigurationSetup = ({
         }
       }
     },
-    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field) => /* @__PURE__ */ React.createElement(
-      Configuration.Configuration,
-      {
-        key: field.id,
-        field,
-        configuredFields: configuration.configuredFields
-      }
-    ))
+    (_a = configuration.configurationFields) == null ? void 0 : _a.map((field, index) => {
+      return /* @__PURE__ */ React.createElement(
+        ConfigurationField.default,
+        {
+          key: field.id || index,
+          field,
+          configuredFields: configuration.configuredFields
+        }
+      );
+    })
   ));
 };
 
-exports.ConfigurationSetup = ConfigurationSetup;
+exports.default = ConfigurationSetup;
 //# sourceMappingURL=ConfigurationSetup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationSetup.js","sources":["../../../../src/mapping/components/ConfigurationSetup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Heading, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport { ConfigurationSetupProps, ConfigurationField } from \"../types\";\nimport { Configuration } from \"./Configuration\";\nimport { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from \"../constants\";\n\n/**\n * ConfigurationSetup component - Displays configuration fields for event setup\n */\nexport const ConfigurationSetup: React.FC<ConfigurationSetupProps> = ({\n  configuration,\n  surveyName,\n  editField,\n}) => {\n  const shouldTruncate = surveyName && surveyName.length > UI_CONSTANTS.MAX_SURVEY_NAME_LENGTH;\n\n  return (\n    <Box css={{ maxWidth: 488, width: \"100%\" }}>\n      <Heading size=\"h5\">{configuration?.title}</Heading>\n      \n      {/* Survey Name Display */}\n      <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n        <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n          {UI_TEXT.SURVEY_NAME_PREFIX}\n        </Text>\n        <Tooltip\n          content={shouldTruncate ? surveyName : UI_TEXT.EMPTY_PLACEHOLDER}\n          css={{\n            zIndex: `${UI_CONSTANTS.TOOLTIP_Z_INDEX} !important`,\n            fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !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      {/* Configuration Fields */}\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: ConfigurationField) => (\n          <Configuration\n            key={field.id}\n            field={field}\n            configuredFields={configuration.configuredFields}\n          />\n        ))}\n      </Flex>\n    </Box>\n  );\n};\n\n"],"names":["UI_CONSTANTS","Box","Heading","Flex","Text","UI_TEXT","Tooltip","STYLE_CONSTANTS","Configuration"],"mappings":";;;;;;;;;;;AASO,MAAM,qBAAwD,CAAC;AAAA,EACpE,aAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AAbN,EAAA,IAAA,EAAA,CAAA;AAcE,EAAA,MAAM,cAAiB,GAAA,UAAA,IAAc,UAAW,CAAA,MAAA,GAASA,kBAAa,CAAA,sBAAA,CAAA;AAEtE,EAAA,2CACGC,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,QAAA,EAAU,KAAK,KAAO,EAAA,MAAA,EAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAA,EAAM,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAM,mBAGxC,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,EAAK,GAAI,EAAA,IAAA,EAAK,KAAK,EAAE,SAAA,EAAW,IAAK,EAAA,EAAA,sCACnCC,SAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAAC,aAAA,CAAQ,kBACX,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,cAAiB,GAAA,UAAA,GAAaD,aAAQ,CAAA,iBAAA;AAAA,MAC/C,GAAK,EAAA;AAAA,QACH,MAAA,EAAQ,CAAG,EAAAL,kBAAA,CAAa,eAAe,CAAA,WAAA,CAAA;AAAA,QACvC,UAAA,EAAY,CAAG,EAAAO,qBAAA,CAAgB,WAAW,CAAA,WAAA,CAAA;AAAA,OAC5C;AAAA,KAAA;AAAA,wCAECN,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAO,EAAA,QAAA;AAAA,QACP,QAAQ,EAAA,IAAA;AAAA,QACR,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAAe,UAAU,OAAQ,EAAA;AAAA,OAAA;AAAA,MAE9C,UAAA;AAAA,KAEL,CAAA;AAAA,GAEJ,CAGA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACD,SAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,GAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,SAAW,EAAA,KAAA;AAAA,QACX,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,OACF;AAAA,KAAA;AAAA,IAAA,CAEC,EAAc,GAAA,aAAA,CAAA,mBAAA,KAAd,IAAmC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,GAAA,CAAI,CAAC,KACvC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAACK,2BAAA;AAAA,MAAA;AAAA,QACC,KAAK,KAAM,CAAA,EAAA;AAAA,QACX,KAAA;AAAA,QACA,kBAAkB,aAAc,CAAA,gBAAA;AAAA,OAAA;AAAA,KAClC,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConfigurationSetup.js","sources":["../../../../src/mapping/components/ConfigurationSetup.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Heading, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport { ConfigurationSetupProps } from \"../types/configuration.types\";\nimport ConfigurationField from \"./ConfigurationField\";\nimport { MAPPING_UI_STRINGS } from \"../constants\";\n\nconst ConfigurationSetup: React.FC<ConfigurationSetupProps> = ({\n  configuration,\n  surveyName,\n  editField,\n}) => {\n  return (\n    <Box css={{ maxWidth: 488, width: \"100%\" }}>\n      <Heading size=\"h5\">{configuration?.title}</Heading>\n      <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n        <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n          {MAPPING_UI_STRINGS.SURVEY_NAME_LABEL}\n        </Text>\n        <Tooltip\n          content={surveyName?.length > 25 ? surveyName : \"\"}\n          css={{\n            zIndex: \"9999999 !important\",\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      <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, index: number) => {\n          return (\n            <ConfigurationField\n              key={field.id || index}\n              field={field}\n              configuredFields={configuration.configuredFields}\n            />\n          );\n        })}\n      </Flex>\n    </Box>\n  );\n};\n\nexport default ConfigurationSetup;\n\n"],"names":["Box","Heading","Flex","Text","MAPPING_UI_STRINGS","Tooltip","ConfigurationField"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,qBAAwD,CAAC;AAAA,EAC7D,aAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AACF,CAAM,KAAA;AAVN,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,2CACGA,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,QAAA,EAAU,KAAK,KAAO,EAAA,MAAA,EAChC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAA,EAAM,aAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,KAAM,mBACxC,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,EAAK,GAAI,EAAA,IAAA,EAAK,KAAK,EAAE,SAAA,EAAW,IAAK,EAAA,EAAA,sCACnCC,SAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAAC,4BAAA,CAAmB,iBACtB,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,CAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,MAAS,IAAA,EAAA,GAAK,UAAa,GAAA,EAAA;AAAA,MAChD,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,oBAAA;AAAA,QACR,UAAY,EAAA,oBAAA;AAAA,OACd;AAAA,KAAA;AAAA,wCAECL,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,MAAQ,EAAA,QAAA;AAAA,QACR,QAAQ,EAAA,IAAA;AAAA,QACR,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAAe,UAAU,OAAQ,EAAA;AAAA,OAAA;AAAA,MAE9C,UAAA;AAAA,KAEL,CAAA;AAAA,GAEJ,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACD,SAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,GAAI,EAAA,IAAA;AAAA,MACJ,GAAK,EAAA;AAAA,QACH,SAAW,EAAA,KAAA;AAAA,QACX,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,OACF;AAAA,KAAA;AAAA,IAAA,CAEC,mBAAc,mBAAd,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAmC,GAAI,CAAA,CAAC,OAAY,KAAkB,KAAA;AACrE,MACE,uBAAA,KAAA,CAAA,aAAA;AAAA,QAACI,0BAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,MAAM,EAAM,IAAA,KAAA;AAAA,UACjB,KAAA;AAAA,UACA,kBAAkB,aAAc,CAAA,gBAAA;AAAA,SAAA;AAAA,OAClC,CAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
-var index = require('../constants/index.js');
+var uiStrings = require('../constants/ui-strings.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');
@@ -31,15 +33,48 @@ var __spreadValues = (a, b) => {
   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: uiStrings.MAPPING_UI_STRINGS.PLACEHOLDER_EMPTY,
+      size: "lg",
+      css: {
+        cursor: "pointer"
+      },
+      components: {
+        Option: CustomShareOption,
+        SingleValue: CustomSingleValue
+      },
+      styles: {
+        singleValue: (provided, state) => __spreadProps(__spreadValues({}, provided), {
+          display: "flex",
+          alignItems: "center",
+          cursor: "pointer"
+        })
+      },
+      value: field.value,
+      onChange: (value) => {
+        var _a;
+        field.onChangeHandler({
+          id: (_a = field == null ? void 0 : field.id) != null ? _a : 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 || index.UI_TEXT.EMPTY_PLACEHOLDER,
+        content: props.data.tooltip || "",
         css: {
-          zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX,
-          fontFamily: `${index.STYLE_CONSTANTS.FONT_FAMILY} !important`
+          zIndex: 999999999,
+          fontFamily: "DM Sans !important"
         }
       },
       /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
@@ -47,7 +82,7 @@ const CustomShareOption = (props) => {
         {
           justifyContent: "center",
           alignItems: "center",
-          css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX }
+          css: { cursor: "pointer", zIndex: 999999999 }
         },
         /* @__PURE__ */ React.createElement(
           flex.Flex,
@@ -60,72 +95,40 @@ const CustomShareOption = (props) => {
               fontWeight: "$7"
             }
           },
-          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: index.STYLE_CONSTANTS.PLUS_ICON_COLOR }),
-          index.UI_TEXT.ADD_ACCOUNT_BUTTON
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }),
+          uiStrings.MAPPING_UI_STRINGS.ADD_ACCOUNT
         )
       )))
     );
-  }
-  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
-    flex.Flex,
-    {
-      css: { cursor: "pointer", zIndex: index.UI_CONSTANTS.TOOLTIP_Z_INDEX },
-      alignItems: "center",
-      justifyContent: "space-between",
-      gap: "$2"
-    },
-    /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label),
-    props.data.isAddonAccount && /* @__PURE__ */ React.createElement(
-      chip.Chip,
+  } else {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+      flex.Flex,
       {
-        color: "primary",
-        size: "sm",
-        leftElement: /* @__PURE__ */ React.createElement(tickCircleFill.TickCircleFillIcon, null)
+        css: { cursor: "pointer", zIndex: 999999999 },
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "$2"
       },
-      index.UI_TEXT.IN_USE_ADDON_CHIP
-    )
-  ));
+      /* @__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)
+        },
+        uiStrings.MAPPING_UI_STRINGS.IN_USE_ADDON
+      )
+    ));
+  }
 };
 const CustomSingleValue = (props) => {
   if (props.data.value === "ADD_NEW") {
     return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
+  } else {
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
   }
-  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.data.label)));
-};
-const CustomAddNewSelect = ({ field }) => {
-  const handleChange = (value) => {
-    var _a;
-    field.onChangeHandler({
-      id: (_a = field == null ? void 0 : field.id) != null ? _a : field == null ? void 0 : field.label,
-      value
-    });
-  };
-  return /* @__PURE__ */ React.createElement(
-    select.Select,
-    {
-      isDisabled: field == null ? void 0 : field.disabled,
-      placeholder: index.UI_TEXT.EMPTY_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: handleChange,
-      options: field.options
-    }
-  );
 };
 
-exports.CustomAddNewSelect = CustomAddNewSelect;
+exports.default = CustomAddNewSelect;
 //# sourceMappingURL=CustomAddNewSelect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Flex, Text, Tooltip, Chip, Select } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon, TickCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { components, OptionProps, SingleValueProps } from \"react-select\";\nimport { ConfigurationField, SelectOption } from \"../types\";\nimport { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from \"../constants\";\n\ninterface CustomAddNewSelectProps {\n  field: ConfigurationField;\n}\n\ninterface CustomSelectOption extends SelectOption {\n  tooltip?: string;\n  isAddonAccount?: boolean;\n}\n\n/**\n * CustomShareOption component - Custom option renderer for select\n */\nconst CustomShareOption: React.FC<OptionProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <Tooltip\n        content={props.data.tooltip || UI_TEXT.EMPTY_PLACEHOLDER}\n        css={{\n          zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX,\n          fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !important`,\n        }}\n      >\n        <Box>\n          <components.Option {...props}>\n            <Flex\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              css={{ cursor: \"pointer\", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\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={STYLE_CONSTANTS.PLUS_ICON_COLOR} />\n                {UI_TEXT.ADD_ACCOUNT_BUTTON}\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: UI_CONSTANTS.TOOLTIP_Z_INDEX }}\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        gap=\"$2\"\n      >\n        <Text size=\"sm\">{props.label}</Text>\n        {props.data.isAddonAccount && (\n          <Chip\n            color=\"primary\"\n            size=\"sm\"\n            leftElement={<TickCircleFillIcon />}\n          >\n            {UI_TEXT.IN_USE_ADDON_CHIP}\n          </Chip>\n        )}\n      </Flex>\n    </components.Option>\n  );\n};\n\n/**\n * CustomSingleValue component - Custom single value renderer for select\n */\nconst CustomSingleValue: React.FC<SingleValueProps<CustomSelectOption>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <components.SingleValue {...props}>\n        <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n          <PlusIcon size={16} />\n          <Text size=\"sm\">{props.data.label}</Text>\n        </Flex>\n      </components.SingleValue>\n    );\n  }\n\n  return (\n    <components.SingleValue {...props}>\n      <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n        <Text size=\"sm\">{props.data.label}</Text>\n      </Flex>\n    </components.SingleValue>\n  );\n};\n\n/**\n * CustomAddNewSelect component - Select component with custom rendering for add new option\n */\nexport const CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({ field }) => {\n  const handleChange = (value: unknown): void => {\n    field.onChangeHandler({\n      id: field?.id ?? field?.label,\n      value: value,\n    });\n  };\n\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder={UI_TEXT.EMPTY_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 as SelectOption}\n      onChange={handleChange}\n      options={field.options}\n    />\n  );\n};\n\n"],"names":["Tooltip","UI_TEXT","UI_CONSTANTS","STYLE_CONSTANTS","Box","components","Flex","PlusIcon","Text","Chip","TickCircleFillIcon","Select"],"mappings":"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"}
+{"version":3,"file":"CustomAddNewSelect.js","sources":["../../../../src/mapping/components/CustomAddNewSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Box, Chip, Flex, Select, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon, TickCircleFillIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { components, OptionProps, SingleValueProps } from \"react-select\";\nimport { MAPPING_UI_STRINGS } from \"../constants\";\n\ntype CustomAddNewSelectProps = {\n  field: any;\n};\n\nconst CustomAddNewSelect: React.FC<CustomAddNewSelectProps> = ({ field }) => {\n  return (\n    <Select\n      isDisabled={field?.disabled}\n      placeholder={MAPPING_UI_STRINGS.PLACEHOLDER_EMPTY}\n      size=\"lg\"\n      css={{\n        cursor: \"pointer\",\n      }}\n      components={{\n        Option: CustomShareOption,\n        SingleValue: CustomSingleValue,\n      }}\n      styles={{\n        singleValue: (provided, state) => ({\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 ?? 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: 999999999,\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                {MAPPING_UI_STRINGS.ADD_ACCOUNT}\n              </Flex>\n            </Flex>\n          </components.Option>\n        </Box>\n      </Tooltip>\n    );\n  } else {\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\n              color=\"primary\"\n              size=\"sm\"\n              leftElement={<TickCircleFillIcon />}\n            >\n              {MAPPING_UI_STRINGS.IN_USE_ADDON}\n            </Chip>\n          )}\n        </Flex>\n      </components.Option>\n    );\n  }\n};\n\nconst CustomSingleValue: React.FC<SingleValueProps<any>> = (props) => {\n  if (props.data.value === \"ADD_NEW\") {\n    return (\n      <components.SingleValue {...props}>\n        <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n          <PlusIcon size={16} />\n          <Text size=\"sm\">{props.data.label}</Text>\n        </Flex>\n      </components.SingleValue>\n    );\n  } else {\n    return (\n      <components.SingleValue {...props}>\n        <Flex css={{ cursor: \"pointer\" }} alignItems=\"center\" gap=\"$2\">\n          <Text size=\"sm\">{props.data.label}</Text>\n        </Flex>\n      </components.SingleValue>\n    );\n  }\n};\n\nexport default CustomAddNewSelect;\n\n"],"names":["Select","MAPPING_UI_STRINGS","Tooltip","Box","components","Flex","PlusIcon","Text","Chip","TickCircleFillIcon"],"mappings":"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"}

package/dist/cjs/mapping/components/EventSetup.js

@@ -1,8 +1,10 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var ConfigurationSetup = require('./ConfigurationSetup.js');
-var index = require('../constants/index.js');
+var uiStrings = require('../constants/ui-strings.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.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');
@@ -23,18 +25,13 @@ const EventSetup = ({
 }) => {
   React.useEffect(() => {
     if (actions == null ? void 0 : actions.value) {
-      actions.onChangeHandler(actions.value);
+      actions == null ? void 0 : actions.onChangeHandler(actions == null ? void 0 : actions.value);
     }
     if (events == null ? void 0 : events.value) {
-      events.onChangeHandler(events.value);
+      events == null ? void 0 : events.onChangeHandler(events == null ? void 0 : events.value);
     }
   }, [actions == null ? void 0 : actions.value, events == null ? void 0 : events.value]);
   const isContinueDisabled = configuration.hasConfiguration ? false : !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
-  const handleSelectChange = (handler, value) => {
-    if (handler) {
-      handler(value);
-    }
-  };
   return /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
@@ -43,38 +40,44 @@ const EventSetup = ({
       justifyContent: "center"
     },
     /* @__PURE__ */ React.createElement(box.Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React.createElement(
-      ConfigurationSetup.ConfigurationSetup,
+      ConfigurationSetup.default,
       {
         configuration,
         surveyName: surveyDetails.surveyName,
         editField: editFieldId
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, index.UI_TEXT.SURVEY_NAME_LABEL), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACCOUNT_LABEL), /* @__PURE__ */ React.createElement(
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, uiStrings.MAPPING_UI_STRINGS.SURVEY_NAME_LABEL), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, uiStrings.MAPPING_UI_STRINGS.CHOOSE_ACCOUNT), /* @__PURE__ */ React.createElement(
       select.Select,
       {
         value: accounts.value,
         options: accounts.options,
-        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
-        onChange: (value) => handleSelectChange(accounts.onChangeHandler, value),
+        placeholder: uiStrings.MAPPING_UI_STRINGS.PLACEHOLDER_EMPTY,
+        onChange: (value) => accounts.onChangeHandler(
+          value
+        ),
         size: "lg"
       }
-    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_OBJECT_LABEL), /* @__PURE__ */ React.createElement(
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, uiStrings.MAPPING_UI_STRINGS.CHOOSE_OBJECT), /* @__PURE__ */ React.createElement(
       select.Select,
       {
         options: events.options,
-        value: events.value,
-        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
-        onChange: (value) => handleSelectChange(events.onChangeHandler, value),
+        value: events == null ? void 0 : events.value,
+        placeholder: uiStrings.MAPPING_UI_STRINGS.PLACEHOLDER_EMPTY,
+        onChange: (value) => events.onChangeHandler(
+          value
+        ),
         size: "lg"
       }
-    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, index.UI_TEXT.CHOOSE_ACTION_LABEL), /* @__PURE__ */ React.createElement(
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, uiStrings.MAPPING_UI_STRINGS.CHOOSE_ACTION), /* @__PURE__ */ React.createElement(
       select.Select,
       {
         size: "lg",
         options: actions.options,
-        value: actions.value,
-        placeholder: index.UI_TEXT.EMPTY_PLACEHOLDER,
-        onChange: (value) => handleSelectChange(actions.onChangeHandler, value)
+        value: actions == null ? void 0 : actions.value,
+        placeholder: uiStrings.MAPPING_UI_STRINGS.PLACEHOLDER_EMPTY,
+        onChange: (value) => actions.onChangeHandler(
+          value
+        )
       }
     )))), /* @__PURE__ */ React.createElement(
       button.Button,
@@ -85,10 +88,10 @@ const EventSetup = ({
         css: { marginTop: "$16" },
         onClick: () => navigateMappingPage()
       },
-      index.UI_TEXT.CONTINUE_MAPPING_BUTTON
+      uiStrings.MAPPING_UI_STRINGS.CONTINUE_MAPPING
     ))
   );
 };
 
-exports.EventSetup = EventSetup;
+exports.default = EventSetup;
 //# sourceMappingURL=EventSetup.js.map