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

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

@@ -0,0 +1,129 @@
+import React__default from 'react';
+import { UI_TEXT, UI_CONSTANTS, STYLE_CONSTANTS } from '../constants/index.js';
+import { Select } from '../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js';
+import { Tooltip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { c as components } from '../../node_modules/react-select/dist/index-a301f526.esm.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { PlusIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js';
+import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Chip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
+import { TickCircleFillIcon } from '../../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 CustomShareOption = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React__default.createElement(
+      Tooltip,
+      {
+        content: props.data.tooltip || UI_TEXT.EMPTY_PLACEHOLDER,
+        css: {
+          zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX,
+          fontFamily: `${STYLE_CONSTANTS.FONT_FAMILY} !important`
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(
+        Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(PlusIcon, { size: 16, color: STYLE_CONSTANTS.PLUS_ICON_COLOR }),
+          UI_TEXT.ADD_ACCOUNT_BUTTON
+        )
+      )))
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      css: { cursor: "pointer", zIndex: UI_CONSTANTS.TOOLTIP_Z_INDEX },
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "$2"
+    },
+    /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.label),
+    props.data.isAddonAccount && /* @__PURE__ */ React__default.createElement(
+      Chip,
+      {
+        color: "primary",
+        size: "sm",
+        leftElement: /* @__PURE__ */ React__default.createElement(TickCircleFillIcon, null)
+      },
+      UI_TEXT.IN_USE_ADDON_CHIP
+    )
+  ));
+};
+const CustomSingleValue = (props) => {
+  if (props.data.value === "ADD_NEW") {
+    return /* @__PURE__ */ React__default.createElement(components.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(PlusIcon, { size: 16 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, props.data.label)));
+  }
+  return /* @__PURE__ */ React__default.createElement(components.SingleValue, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Flex, { css: { cursor: "pointer" }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(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__default.createElement(
+    Select,
+    {
+      isDisabled: field == null ? void 0 : field.disabled,
+      placeholder: 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
+    }
+  );
+};
+
+export { CustomAddNewSelect };
+//# sourceMappingURL=CustomAddNewSelect.js.map

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

@@ -0,0 +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":["React"],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+import React__default, { useEffect } from 'react';
+import { ConfigurationSetup } from './ConfigurationSetup.js';
+import { UI_TEXT } from '../constants/index.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 { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { FormLabel } from '../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js';
+import { Select } from '../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { ChevronRightIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
+
+const EventSetup = ({
+  surveyDetails,
+  accounts,
+  events,
+  actions,
+  navigateMappingPage,
+  configuration,
+  editFieldId
+}) => {
+  useEffect(() => {
+    if (actions == null ? void 0 : actions.value) {
+      actions.onChangeHandler(actions.value);
+    }
+    if (events == null ? void 0 : events.value) {
+      events.onChangeHandler(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__default.createElement(
+    Flex,
+    {
+      css: { paddingTop: "$40" },
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React__default.createElement(Box, { css: { width: 488 } }, configuration.hasConfiguration ? /* @__PURE__ */ React__default.createElement(
+      ConfigurationSetup,
+      {
+        configuration,
+        surveyName: surveyDetails.surveyName,
+        editField: editFieldId
+      }
+    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, configuration == null ? void 0 : configuration.title), /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral500" } }, UI_TEXT.SURVEY_NAME_LABEL), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, surveyDetails.surveyName)), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, UI_TEXT.CHOOSE_ACCOUNT_LABEL), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        value: accounts.value,
+        options: accounts.options,
+        placeholder: UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(accounts.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, UI_TEXT.CHOOSE_OBJECT_LABEL), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        options: events.options,
+        value: events.value,
+        placeholder: UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(events.onChangeHandler, value),
+        size: "lg"
+      }
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, UI_TEXT.CHOOSE_ACTION_LABEL), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        size: "lg",
+        options: actions.options,
+        value: actions.value,
+        placeholder: UI_TEXT.EMPTY_PLACEHOLDER,
+        onChange: (value) => handleSelectChange(actions.onChangeHandler, value)
+      }
+    )))), /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "lg",
+        disabled: isContinueDisabled,
+        rightIcon: /* @__PURE__ */ React__default.createElement(ChevronRightIcon, null),
+        css: { marginTop: "$16" },
+        onClick: () => navigateMappingPage()
+      },
+      UI_TEXT.CONTINUE_MAPPING_BUTTON
+    ))
+  );
+};
+
+export { EventSetup };
+//# sourceMappingURL=EventSetup.js.map

package/dist/es/mapping/components/EventSetup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventSetup.js","sources":["../../../../src/mapping/components/EventSetup.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  FormLabel,\n  Heading,\n  Select,\n  Text,\n} from \"@sparrowengg/twigs-react\";\nimport { ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { EventSetupProps, SelectOption, ChangeHandlerValue } from \"../types\";\nimport { ConfigurationSetup } from \"./ConfigurationSetup\";\nimport { UI_TEXT } from \"../constants\";\n\n/**\n * EventSetup component - Handles event and action selection before mapping\n */\nexport const EventSetup: React.FC<EventSetupProps> = ({\n  surveyDetails,\n  accounts,\n  events,\n  actions,\n  navigateMappingPage,\n  configuration,\n  editFieldId,\n}) => {\n  // Trigger onChange handlers for pre-selected values\n  useEffect(() => {\n    if (actions?.value) {\n      actions.onChangeHandler(actions.value);\n    }\n    if (events?.value) {\n      events.onChangeHandler(events.value);\n    }\n  }, [actions?.value, events?.value]);\n\n  const isContinueDisabled = configuration.hasConfiguration\n    ? false\n    : !actions?.value || !events?.value;\n\n  const handleSelectChange = (\n    handler: ((value: ChangeHandlerValue) => void) | undefined,\n    value: unknown\n  ): void => {\n    if (handler) {\n      handler(value as ChangeHandlerValue);\n    }\n  };\n\n  return (\n    <Flex\n      css={{ paddingTop: \"$40\" }}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Box css={{ width: 488 }}>\n        {configuration.hasConfiguration ? (\n          <ConfigurationSetup\n            configuration={configuration}\n            surveyName={surveyDetails.surveyName}\n            editField={editFieldId}\n          />\n        ) : (\n          <>\n            <Heading size=\"h5\">{configuration?.title}</Heading>\n            <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n              <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n                {UI_TEXT.SURVEY_NAME_LABEL}\n              </Text>\n              <Text size=\"sm\" weight=\"medium\" css={{ color: \"$neutral800\" }}>\n                {surveyDetails.surveyName}\n              </Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap=\"$8\" css={{ marginTop: \"$16\" }}>\n              {/* Accounts Dropdown */}\n              {accounts?.hasAccounts && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACCOUNT_LABEL}\n                  </FormLabel>\n                  <Select\n                    value={accounts.value}\n                    options={accounts.options}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(accounts.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Events Dropdown */}\n              {events?.hasEvents && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_OBJECT_LABEL}\n                  </FormLabel>\n                  <Select\n                    options={events.options}\n                    value={events.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(events.onChangeHandler, value)\n                    }\n                    size=\"lg\"\n                  />\n                </Flex>\n              )}\n\n              {/* Actions Dropdown */}\n              {actions?.hasActions && (\n                <Flex gap=\"$2\" flexDirection=\"column\">\n                  <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                    {UI_TEXT.CHOOSE_ACTION_LABEL}\n                  </FormLabel>\n                  <Select\n                    size=\"lg\"\n                    options={actions.options}\n                    value={actions.value}\n                    placeholder={UI_TEXT.EMPTY_PLACEHOLDER}\n                    onChange={(value: unknown) =>\n                      handleSelectChange(actions.onChangeHandler, value)\n                    }\n                  />\n                </Flex>\n              )}\n            </Flex>\n          </>\n        )}\n\n        <Button\n          size=\"lg\"\n          disabled={isContinueDisabled}\n          rightIcon={<ChevronRightIcon />}\n          css={{ marginTop: \"$16\" }}\n          onClick={() => navigateMappingPage()}\n        >\n          {UI_TEXT.CONTINUE_MAPPING_BUTTON}\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}

package/dist/es/mapping/components/MappingHeader.js

@@ -0,0 +1,155 @@
+import React__default, { useState } from 'react';
+import ArrowIcon from '../../commons/icons/arrow.js';
+import DraftModal from '../../commons/components/draftModal.js';
+import NamingModal from '../../commons/components/NamingModal.js';
+import { validateEssentialFields } from '../utils/validation.js';
+import { UI_TEXT, DRAFT_CONSTANTS } from '../constants/index.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { ArrowLeftIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
+import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+
+const MappingHeader = ({
+  hasNamingModal,
+  navigateMappingPage,
+  accounts,
+  events,
+  actions,
+  havingTypeDropdown,
+  onSaveMappingLoader,
+  hasPreviousMapping,
+  isMappingPage,
+  fields,
+  navigateEventPage,
+  onSaveHandler,
+  previousMappingHandler,
+  editFieldId,
+  draftHandler,
+  configuration
+}) => {
+  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);
+  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);
+  const isEventSetupDisabled = !(actions == null ? void 0 : actions.value) || !(events == null ? void 0 : events.value);
+  const isSaveDisabled = !validateEssentialFields(fields, havingTypeDropdown);
+  const handleSaveClick = () => {
+    if (hasNamingModal) {
+      setIsNamingModalOpen(true);
+    } else {
+      onSaveHandler(editFieldId);
+    }
+  };
+  const handleDraftSave = async () => {
+    await draftHandler(DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId == null ? void 0 : editFieldId.toString());
+    setIsDraftModalOpen(false);
+    await previousMappingHandler();
+  };
+  const handleDraftCancel = async () => {
+    await previousMappingHandler();
+    setIsDraftModalOpen(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        width: "100%",
+        top: "1px",
+        zIndex: "99",
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    isDraftModalOpen && /* @__PURE__ */ React__default.createElement(
+      DraftModal,
+      {
+        onSaveHandler: handleDraftSave,
+        onCloseHandler: () => setIsDraftModalOpen(false),
+        onCancel: handleDraftCancel
+      }
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, editFieldId ? UI_TEXT.EDIT_MAPPING_TITLE : UI_TEXT.NEW_MAPPING_TITLE)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateEventPage()
+        },
+        UI_TEXT.EVENT_SETUP_TITLE
+      ),
+      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          onClick: () => navigateMappingPage(),
+          css: { color: !isEventSetupDisabled ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: isEventSetupDisabled
+        },
+        UI_TEXT.MAPPING_TITLE
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "lg",
+        disabled: isSaveDisabled,
+        onClick: handleSaveClick,
+        css: { visibility: isMappingPage ? "visible" : "hidden" }
+      },
+      editFieldId ? UI_TEXT.UPDATE_MAPPING_BUTTON : UI_TEXT.SAVE_MAPPING_BUTTON
+    ),
+    hasNamingModal && /* @__PURE__ */ React__default.createElement(
+      NamingModal,
+      {
+        editFieldId,
+        mappingLoader: onSaveMappingLoader,
+        saveHandler: () => onSaveHandler(editFieldId),
+        closeHandler: () => setIsNamingModalOpen(false),
+        value: (configuration == null ? void 0 : configuration.currentMappingName) || UI_TEXT.EMPTY_PLACEHOLDER,
+        setValue: (value) => {
+          var _a;
+          return (_a = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a.call(configuration, value);
+        },
+        isOpen: isNamingModalOpen
+      }
+    )
+  );
+};
+
+export { MappingHeader };
+//# sourceMappingURL=MappingHeader.js.map

package/dist/es/mapping/components/MappingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Box,\n  Button,\n  Flex,\n  Heading,\n  IconButton,\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport DraftModal from \"../../commons/components/draftModal\";\nimport NamingModal from \"../../commons/components/NamingModal\";\nimport { MappingHeaderProps } from \"../types\";\nimport { validateEssentialFields } from \"../utils\";\nimport { UI_TEXT, DRAFT_CONSTANTS } from \"../constants\";\n\n/**\n * MappingHeader component - Header for mapping page with navigation and save functionality\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  hasNamingModal,\n  navigateMappingPage,\n  accounts,\n  events,\n  actions,\n  havingTypeDropdown,\n  onSaveMappingLoader,\n  hasPreviousMapping,\n  isMappingPage,\n  fields,\n  navigateEventPage,\n  onSaveHandler,\n  previousMappingHandler,\n  editFieldId,\n  draftHandler,\n  configuration,\n}) => {\n  const [isDraftModalOpen, setIsDraftModalOpen] = useState(false);\n  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);\n\n  const isEventSetupDisabled = !actions?.value || !events?.value;\n  const isSaveDisabled = !validateEssentialFields(fields, havingTypeDropdown);\n\n  const handleSaveClick = (): void => {\n    if (hasNamingModal) {\n      setIsNamingModalOpen(true);\n    } else {\n      onSaveHandler(editFieldId);\n    }\n  };\n\n  const handleDraftSave = async (): Promise<void> => {\n    await draftHandler(DRAFT_CONSTANTS.MAPPING_TYPE, editFieldId?.toString());\n    setIsDraftModalOpen(false);\n    await previousMappingHandler();\n  };\n\n  const handleDraftCancel = async (): Promise<void> => {\n    await previousMappingHandler();\n    setIsDraftModalOpen(false);\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        width: \"100%\",\n        top: \"1px\",\n        zIndex: \"99\",\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Draft Modal */}\n      {isDraftModalOpen && (\n        <DraftModal\n          onSaveHandler={handleDraftSave}\n          onCloseHandler={() => setIsDraftModalOpen(false)}\n          onCancel={handleDraftCancel}\n        />\n      )}\n\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editFieldId ? UI_TEXT.EDIT_MAPPING_TITLE : UI_TEXT.NEW_MAPPING_TITLE}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Breadcrumb */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateEventPage()}\n        >\n          {UI_TEXT.EVENT_SETUP_TITLE}\n        </Button>\n        <Arrow />\n        <Button\n          onClick={() => navigateMappingPage()}\n          css={{ color: !isEventSetupDisabled ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          disabled={isEventSetupDisabled}\n        >\n          {UI_TEXT.MAPPING_TITLE}\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Button\n        size=\"lg\"\n        disabled={isSaveDisabled}\n        onClick={handleSaveClick}\n        css={{ visibility: isMappingPage ? \"visible\" : \"hidden\" }}\n      >\n        {editFieldId ? UI_TEXT.UPDATE_MAPPING_BUTTON : UI_TEXT.SAVE_MAPPING_BUTTON}\n      </Button>\n\n      {/* Naming Modal */}\n      {hasNamingModal && (\n        <NamingModal\n          editFieldId={editFieldId}\n          mappingLoader={onSaveMappingLoader}\n          saveHandler={() => onSaveHandler(editFieldId)}\n          closeHandler={() => setIsNamingModalOpen(false)}\n          value={configuration?.currentMappingName || UI_TEXT.EMPTY_PLACEHOLDER}\n          setValue={(value: string) => configuration?.setMappingName?.(value)}\n          isOpen={isNamingModalOpen}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["React","Arrow"],"mappings":"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"}

package/dist/es/mapping/hooks/useFieldMapping.js

@@ -0,0 +1,97 @@
+import { useEffect } from 'react';
+import { DEFAULT_FIELD_VALUE } from '../constants/index.js';
+import { removeDuplicates } from '../utils/helpers.js';
+import v4 from '../../node_modules/uuid/dist/esm-browser/v4.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 useFieldMapping = ({
+  fields,
+  setFields,
+  editField
+}) => {
+  useEffect(() => {
+    if (editField == null ? void 0 : editField.id) {
+      setFields(editField.fieldValues);
+    } else if (fields.length === 0) {
+      setFields([__spreadProps(__spreadValues({}, DEFAULT_FIELD_VALUE), { id: v4() })]);
+    } else {
+      setFields(
+        (prevFields) => prevFields.map((field) => __spreadProps(__spreadValues({}, field), { id: field.id || v4() }))
+      );
+    }
+  }, []);
+  const handleDependency = (field, property, value) => {
+    if ((field == null ? void 0 : field.dependency) && typeof field.dependency === "object" && "length" in field.dependency) {
+      return field.dependency;
+    }
+    return [];
+  };
+  const handleFieldValue = (id, property, value) => {
+    const targetField = fields.find((field) => field.id === id);
+    const dependentFields = handleDependency(targetField);
+    const mergedFields = removeDuplicates([...fields, ...dependentFields]);
+    setFields(
+      mergedFields.map((field) => {
+        if (field.id === id) {
+          switch (property) {
+            case "type":
+              return __spreadProps(__spreadValues({}, field), {
+                surveySparrowField: null,
+                mappedType: value,
+                id: id.toString()
+              });
+            case "integrationFieldType":
+              return __spreadProps(__spreadValues({}, field), {
+                defaultValue: null,
+                [property]: value
+              });
+            default:
+              return __spreadProps(__spreadValues({}, field), {
+                [property]: value
+              });
+          }
+        }
+        return field;
+      })
+    );
+  };
+  const addNewField = () => {
+    setFields((prevFields) => [
+      ...prevFields,
+      __spreadProps(__spreadValues({}, DEFAULT_FIELD_VALUE), { id: v4() })
+    ]);
+  };
+  const removeField = (fieldId) => {
+    setFields((prevFields) => prevFields.filter((field) => field.id !== fieldId));
+  };
+  const essentialFields = fields.filter((field) => field.isEssentialField);
+  const commonFields = fields.filter((field) => !field.isEssentialField);
+  return {
+    handleFieldValue,
+    addNewField,
+    removeField,
+    essentialFields,
+    commonFields
+  };
+};
+
+export { useFieldMapping };
+//# sourceMappingURL=useFieldMapping.js.map

package/dist/es/mapping/hooks/useFieldMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldMapping.js","sources":["../../../../src/mapping/hooks/useFieldMapping.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { v4 as uuid } from \"uuid\";\nimport { FieldType, IntegrationFieldType, FormFieldValue } from \"../types\";\nimport { DEFAULT_FIELD_VALUE } from \"../constants\";\nimport { removeDuplicates } from \"../utils\";\n\nimport { MappingEditField } from \"../types\";\n\ninterface UseFieldMappingParams {\n  fields: Array<FieldType>;\n  setFields: React.Dispatch<React.SetStateAction<Array<FieldType>>>;\n  editField?: MappingEditField | null;\n}\n\ninterface UseFieldMappingReturn {\n  handleFieldValue: (id: string | number, property: string, value: FormFieldValue) => void;\n  addNewField: () => void;\n  removeField: (fieldId: string) => void;\n  essentialFields: Array<FieldType>;\n  commonFields: Array<FieldType>;\n}\n\n/**\n * Custom hook to manage field mappings\n * @param params - Hook parameters\n * @returns Object containing field management functions\n */\nexport const useFieldMapping = ({\n  fields,\n  setFields,\n  editField,\n}: UseFieldMappingParams): UseFieldMappingReturn => {\n  // Initialize fields on mount or edit\n  useEffect(() => {\n    if (editField?.id) {\n      setFields(editField.fieldValues);\n    } else if (fields.length === 0) {\n      setFields([{ ...DEFAULT_FIELD_VALUE, id: uuid() } as FieldType]);\n    } else {\n      // Ensure all fields have unique IDs\n      setFields((prevFields) =>\n        prevFields.map((field) => ({ ...field, id: field.id || uuid() }))\n      );\n    }\n  }, []);\n\n  /**\n   * Handles custom dependency logic for fields\n   * @param field - Target field\n   * @param property - Property being changed\n   * @param value - New value\n   * @returns Array of dependent fields\n   */\n  const handleDependency = (\n    field: FieldType | undefined,\n    property: string,\n    value: FormFieldValue\n  ): Array<IntegrationFieldType> => {\n    if (\n      field?.dependency &&\n      typeof field.dependency === \"object\" &&\n      \"length\" in field.dependency\n    ) {\n      return field.dependency as unknown as Array<IntegrationFieldType>;\n    }\n    return [];\n  };\n\n  /**\n   * Updates field value and handles dependencies\n   * @param id - Field ID\n   * @param property - Property to update\n   * @param value - New value\n   */\n  const handleFieldValue = (\n    id: string | number,\n    property: string,\n    value: FormFieldValue\n  ): void => {\n    const targetField = fields.find((field) => field.id === id);\n    const dependentFields = handleDependency(targetField, property, value);\n\n    // Merge dependent fields and remove duplicates\n    const mergedFields = removeDuplicates([...fields, ...dependentFields]);\n\n    setFields(\n      mergedFields.map((field) => {\n        if (field.id === id) {\n          switch (property) {\n            case \"type\":\n              return {\n                ...field,\n                surveySparrowField: null,\n                mappedType: value as FieldType[\"mappedType\"],\n                id: id.toString(),\n              };\n            case \"integrationFieldType\":\n              return {\n                ...field,\n                defaultValue: null,\n                [property]: value,\n              };\n            default:\n              return {\n                ...field,\n                [property]: value,\n              };\n          }\n        }\n        return field;\n      }) as FieldType[]\n    );\n  };\n\n  /**\n   * Adds a new mapping field\n   */\n  const addNewField = (): void => {\n    setFields((prevFields) => [\n      ...prevFields,\n      { ...DEFAULT_FIELD_VALUE, id: uuid() } as FieldType,\n    ]);\n  };\n\n  /**\n   * Removes a field by ID\n   * @param fieldId - Field ID to remove\n   */\n  const removeField = (fieldId: string): void => {\n    setFields((prevFields) => prevFields.filter((field) => field.id !== fieldId));\n  };\n\n  // Separate essential and common fields\n  const essentialFields = fields.filter((field) => field.isEssentialField);\n  const commonFields = fields.filter((field) => !field.isEssentialField);\n\n  return {\n    handleFieldValue,\n    addNewField,\n    removeField,\n    essentialFields,\n    commonFields,\n  };\n};\n\n"],"names":["uuid"],"mappings":"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"}

package/dist/es/mapping/hooks/useMappingData.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { fetchAllMappingData } from '../services/index.js';
+import { API_CONSTANTS, MAPPING_ERROR_MESSAGES } from '../constants/index.js';
+
+const useMappingData = ({
+  apiURL,
+  surveyId,
+  token
+}) => {
+  const [ssMappingData, setSSMappingData] = useState({
+    questions: [],
+    variables: [],
+    contactProperties: [],
+    expressions: []
+  });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchAllMappingData(apiURL, surveyId, token != null ? token : "");
+      setSSMappingData(data);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : MAPPING_ERROR_MESSAGES.FETCH_ERROR;
+      console.error(MAPPING_ERROR_MESSAGES.FETCH_ERROR, err);
+      setError(errorMessage);
+      setSSMappingData({
+        questions: [],
+        contactProperties: [],
+        variables: [],
+        expressions: []
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (token && token.length > API_CONSTANTS.TOKEN_MIN_LENGTH && surveyId) {
+      fetchData();
+    } else {
+      setLoading(false);
+    }
+  }, [token, surveyId, apiURL]);
+  return {
+    ssMappingData,
+    loading,
+    error,
+    refetch: fetchData
+  };
+};
+
+export { useMappingData };
+//# sourceMappingURL=useMappingData.js.map

package/dist/es/mapping/hooks/useMappingData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMappingData.js","sources":["../../../../src/mapping/hooks/useMappingData.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { SelectOption, SsMappingDataResponse } from \"../types\";\nimport { fetchAllMappingData } from \"../services\";\nimport { MAPPING_ERROR_MESSAGES, API_CONSTANTS } from \"../constants\";\n\ninterface UseMappingDataParams {\n  apiURL: string;\n  surveyId: number | string;\n  token: string | undefined;\n}\n\ninterface UseMappingDataReturn {\n  ssMappingData: SsMappingDataResponse<SelectOption>;\n  loading: boolean;\n  error: string | null;\n  refetch: () => Promise<void>;\n}\n\n/**\n * Custom hook to fetch and manage mapping data\n * @param params - Hook parameters\n * @returns Object containing mapping data, loading state, error, and refetch function\n */\nexport const useMappingData = ({\n  apiURL,\n  surveyId,\n  token,\n}: UseMappingDataParams): UseMappingDataReturn => {\n  const [ssMappingData, setSSMappingData] = useState<SsMappingDataResponse<SelectOption>>({\n    questions: [],\n    variables: [],\n    contactProperties: [],\n    expressions: [],\n  });\n  const [loading, setLoading] = useState<boolean>(true);\n  const [error, setError] = useState<string | null>(null);\n\n  const fetchData = async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const data = await fetchAllMappingData(apiURL, surveyId, token ?? \"\");\n      setSSMappingData(data);\n    } catch (err) {\n      const errorMessage = err instanceof Error ? err.message : MAPPING_ERROR_MESSAGES.FETCH_ERROR;\n      console.error(MAPPING_ERROR_MESSAGES.FETCH_ERROR, err);\n      setError(errorMessage);\n      setSSMappingData({\n        questions: [],\n        contactProperties: [],\n        variables: [],\n        expressions: [],\n      });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    if (token && token.length > API_CONSTANTS.TOKEN_MIN_LENGTH && surveyId) {\n      fetchData();\n    } else {\n      setLoading(false);\n    }\n  }, [token, surveyId, apiURL]);\n\n  return {\n    ssMappingData,\n    loading,\n    error,\n    refetch: fetchData,\n  };\n};\n\n"],"names":[],"mappings":";;;;AAuBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AACF,CAAkD,KAAA;AAChD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAA8C,CAAA;AAAA,IACtF,WAAW,EAAC;AAAA,IACZ,WAAW,EAAC;AAAA,IACZ,mBAAmB,EAAC;AAAA,IACpB,aAAa,EAAC;AAAA,GACf,CAAA,CAAA;AACD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,IAAI,CAAA,CAAA;AACpD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAwB,IAAI,CAAA,CAAA;AAEtD,EAAA,MAAM,YAAY,YAA2B;AAC3C,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAEb,IAAI,IAAA;AACF,MAAA,MAAM,OAAO,MAAM,mBAAA,CAAoB,MAAQ,EAAA,QAAA,EAAU,wBAAS,EAAE,CAAA,CAAA;AACpE,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,aACd,GAAK,EAAA;AACZ,MAAA,MAAM,YAAe,GAAA,GAAA,YAAe,KAAQ,GAAA,GAAA,CAAI,UAAU,sBAAuB,CAAA,WAAA,CAAA;AACjF,MAAQ,OAAA,CAAA,KAAA,CAAM,sBAAuB,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AACrD,MAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AACrB,MAAiB,gBAAA,CAAA;AAAA,QACf,WAAW,EAAC;AAAA,QACZ,mBAAmB,EAAC;AAAA,QACpB,WAAW,EAAC;AAAA,QACZ,aAAa,EAAC;AAAA,OACf,CAAA,CAAA;AAAA,KACD,SAAA;AACA,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KAClB;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAS,IAAA,KAAA,CAAM,MAAS,GAAA,aAAA,CAAc,oBAAoB,QAAU,EAAA;AACtE,MAAU,SAAA,EAAA,CAAA;AAAA,KACL,MAAA;AACL,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KAClB;AAAA,GACC,EAAA,CAAC,KAAO,EAAA,QAAA,EAAU,MAAM,CAAC,CAAA,CAAA;AAE5B,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAS,EAAA,SAAA;AAAA,GACX,CAAA;AACF;;;;"}