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

package/dist/es/single-mapping/components/MappingContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MappingContent.js","sources":["../../../../src/single-mapping/components/MappingContent.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport {\n  Box,\n  Flex,\n  Text,\n  Heading,\n  RadioGroup,\n  Radio,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  Chip,\n} from \"@sparrowengg/twigs-react\";\nimport Spinner from \"../../commons/components/spinner\";\nimport { MappingComponentProps } from \"../types/mapping.types\";\nimport { useMappingData } from \"../hooks/useMappingData\";\nimport { TabsContentComponent } from \"./TabsContentComponent\";\nimport { CustomChip } from \"./CustomChip\";\nimport { mappingTabValues } from \"../../commons/constants\";\nimport { getEnabledFieldsCount, getTotalFieldsCount } from \"../utils/mapping.utils\";\nimport { IMPORT_METHODS, STYLES, UI_LABELS, TAB_VALUES, PLACEHOLDER_LABELS, COLOR_CODES } from \"../constants\";\n\nexport const MappingContent: React.FC<MappingComponentProps> = (props) => {\n  const {\n    surveyId,\n    apiURL,\n    token,\n    surveyProperties,\n    importResponse,\n    editField,\n    setIsInitialLoad,\n    setOriginalMappingData,\n    ssMappingData: externalMappingData,\n    setSSMappingData: setExternalMappingData,\n  } = props;\n\n  const { ssMappingData, setSSMappingData, loader, handleFieldValues } = useMappingData({\n    surveyId,\n    apiURL,\n    token,\n    surveyProperties,\n    importResponse,\n    editField,\n    setIsInitialLoad,\n    setOriginalMappingData,\n  });\n\n  const [searchInput, setSearchInput] = useState(\"\");\n  const [SSMappedFields, setSSMappedFields] = useState<any[]>([]);\n\n  // Sync internal state with external state\n  React.useEffect(() => {\n    if (setExternalMappingData && Object.keys(ssMappingData).some(key => (ssMappingData as any)[key]?.length > 0)) {\n      setExternalMappingData(ssMappingData as any);\n    }\n  }, [ssMappingData, setExternalMappingData]);\n\n  // Update mapped fields when data changes\n  useEffect(() => {\n    if (\n      ssMappingData?.questions?.length ||\n      ssMappingData?.variables?.length ||\n      ssMappingData?.contactProperties?.length ||\n      ssMappingData?.expressions?.length ||\n      ssMappingData?.property?.length\n    ) {\n      const updatedFieldValues = Object.keys(ssMappingData).reduce(\n        (acc: any, key: any) => {\n          acc[key] = ssMappingData[key].map((field: any) => {\n            if (importResponse?.value?.ImportMethod === IMPORT_METHODS.SELECTED_DATA) {\n              return { ...field, isEnabled: field?.isEnabled };\n            } else {\n              if (field?.id !== \"ALL\") {\n                return { ...field, isEnabled: true };\n              }\n              return field;\n            }\n          });\n          return acc;\n        },\n        {}\n      );\n\n      setSSMappedFields(updatedFieldValues);\n\n      if (importResponse?.value?.ImportMethod === IMPORT_METHODS.SEND_ALL_DATA) {\n        importResponse.onChangeHandler({\n          id: \"mappedFields\",\n          value: updatedFieldValues,\n        });\n      } else {\n        importResponse.onChangeHandler({\n          id: \"mappedFields\",\n          value: ssMappingData,\n        });\n      }\n    }\n  }, [ssMappingData, importResponse?.value?.ImportMethod]);\n\n  const handleImportMethodChange = (value: string) => {\n    importResponse.onChangeHandler({\n      id: \"ImportMethod\",\n      value: value,\n    });\n    if (value === IMPORT_METHODS.SEND_ALL_DATA) {\n      importResponse.onChangeHandler({\n        id: \"mappedFields\",\n        value: SSMappedFields,\n      });\n    }\n  };\n\n  if (loader) {\n    return (\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        css={{ height: \"calc(100vh - 57px)\" }}\n      >\n        <Spinner />\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      <Box css={{ maxWidth: STYLES.maxMappingWidth, width: \"100%\", marginBlock: \"$40\" }}>\n        {importResponse?.hasImportResponse && (\n          <Flex flexDirection=\"column\">\n            <Heading size=\"h5\" css={{ color: \"$neutral900\" }}>\n              {UI_LABELS.SELECT_IMPORT_DATA}\n            </Heading>\n            <RadioGroup\n              defaultValue={importResponse?.value?.ImportMethod}\n              onChange={handleImportMethodChange}\n            >\n              <Flex\n                alignItems=\"center\"\n                gap=\"$20\"\n                css={{\n                  marginTop: \"$9\",\n                  \"& label\": { color: \"$neutral800\", cursor: \"pointer\" },\n                }}\n              >\n                <Radio size=\"md\" value={IMPORT_METHODS.SEND_ALL_DATA} css={{ cursor: \"pointer\" }}>\n                  {UI_LABELS.SEND_ALL_DATA}\n                </Radio>\n                <Radio size=\"md\" value={IMPORT_METHODS.SELECTED_DATA} css={{ cursor: \"pointer\" }}>\n                  {UI_LABELS.SEND_SELECTED_DATA}\n                </Radio>\n              </Flex>\n            </RadioGroup>\n          </Flex>\n        )}\n\n        {importResponse?.value?.ImportMethod === IMPORT_METHODS.SELECTED_DATA ? (\n          <Box css={{ marginTop: \"$24\" }}>\n            <Tabs defaultValue=\"QUESTIONS\">\n              <TabsList\n                css={{\n                  borderBottom: \"$borderWidths$xs solid $neutral200\",\n                }}\n              >\n                {mappingTabValues.map((tab) => {\n                  const count = getEnabledFieldsCount(ssMappingData, tab.placeholder);\n                  return (\n                    <TabsTrigger\n                      key={tab?.id}\n                      value={tab?.value}\n                      css={{\n                        padding: \"$6 $4 !important\",\n                      }}\n                      onClick={() => setSearchInput(\"\")}\n                    >\n                      <Text size=\"sm\" weight=\"bold\">\n                        {tab.name}\n                      </Text>\n                      {!!count && (\n                        <Chip\n                          css={{\n                            marginLeft: \"$2\",\n                            borderRadius: \"5px\",\n                            color: \"$neutral800\",\n                          }}\n                          variant=\"outline\"\n                          rounded=\"sm\"\n                        >\n                          {count}\n                        </Chip>\n                      )}\n                    </TabsTrigger>\n                  );\n                })}\n              </TabsList>\n\n              <TabsContentComponent\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                value={TAB_VALUES.QUESTIONS}\n                placeholder={PLACEHOLDER_LABELS.QUESTIONS}\n                fields={ssMappingData.questions}\n                handleFieldValues={(field: any, value: boolean) =>\n                  handleFieldValues(\"questions\", field?.id, value)\n                }\n              />\n              <TabsContentComponent\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                fields={ssMappingData.variables}\n                value={TAB_VALUES.VARIABLE}\n                placeholder={PLACEHOLDER_LABELS.VARIABLES}\n                handleFieldValues={(field: any, value: boolean) =>\n                  handleFieldValues(\"variables\", field?.id, value)\n                }\n              />\n              <TabsContentComponent\n                fields={ssMappingData.contactProperties}\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                value={TAB_VALUES.CONTACT}\n                placeholder={PLACEHOLDER_LABELS.CONTACTS}\n                handleFieldValues={(field, value) =>\n                  handleFieldValues(\"contactProperties\", field?.id, value)\n                }\n              />\n              <TabsContentComponent\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                value={TAB_VALUES.EXPRESSION}\n                placeholder={PLACEHOLDER_LABELS.EXPRESSIONS}\n                fields={ssMappingData.expressions}\n                handleFieldValues={(field, value) =>\n                  handleFieldValues(\"expressions\", field?.id, value)\n                }\n              />\n              <TabsContentComponent\n                value={TAB_VALUES.PROPERTY}\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                placeholder={PLACEHOLDER_LABELS.PROPERTIES}\n                fields={ssMappingData.property}\n                handleFieldValues={(field: any, value: boolean) =>\n                  handleFieldValues(\"property\", field?.id, value)\n                }\n              />\n              <TabsContentComponent\n                value={TAB_VALUES.DERIVED_QUESTIONS}\n                searchInput={searchInput}\n                setSearchInput={setSearchInput}\n                placeholder={PLACEHOLDER_LABELS.DERIVED_QUESTIONS}\n                fields={ssMappingData.derivedQuestions}\n                handleFieldValues={(field: any, value: boolean) =>\n                  handleFieldValues(\"derivedQuestions\", field?.id, value)\n                }\n              />\n            </Tabs>\n          </Box>\n        ) : (\n          <Flex css={{ marginTop: \"$16\" }} alignItems=\"center\" gap=\"$6\">\n            <Text size=\"sm\" weight=\"regular\" css={{ width: \"90px\", color: \"$neutral900\" }}>\n              {UI_LABELS.THIS_INCLUDES}\n            </Text>\n            <Flex alignItems=\"center\" gap=\"$4\">\n              {getTotalFieldsCount(ssMappingData, \"questions\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.QUESTIONS_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"questions\")} {UI_LABELS.QUESTIONS}\n                </CustomChip>\n              )}\n              {getTotalFieldsCount(ssMappingData, \"derivedQuestions\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.ENRICH_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"derivedQuestions\")} {UI_LABELS.ENRICH}\n                </CustomChip>\n              )}\n              {getTotalFieldsCount(ssMappingData, \"variables\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.VARIABLES_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"variables\")} {UI_LABELS.VARIABLES}\n                </CustomChip>\n              )}\n              {getTotalFieldsCount(ssMappingData, \"contactProperties\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.CONTACTS_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"contactProperties\")} {UI_LABELS.CONTACTS}\n                </CustomChip>\n              )}\n              {getTotalFieldsCount(ssMappingData, \"expressions\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.EXPRESSIONS_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"expressions\")} {UI_LABELS.EXPRESSIONS}\n                </CustomChip>\n              )}\n              {getTotalFieldsCount(ssMappingData, \"property\") > 0 && (\n                <CustomChip bgColor={COLOR_CODES.PROPERTIES_BG}>\n                  {getTotalFieldsCount(ssMappingData, \"property\")} {UI_LABELS.PROPERTIES}\n                </CustomChip>\n              )}\n            </Flex>\n          </Flex>\n        )}\n      </Box>\n    </Flex>\n  );\n};\n\n"],"names":["React","_a","_b","_c"],"mappings":"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"}

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

@@ -0,0 +1,147 @@
+import React__default from 'react';
+import EditConfirmation from '../../commons/components/edit-confirmation.js';
+import ArrowIcon from '../../commons/icons/arrow.js';
+import { useMappingHeaderLogic } from '../hooks/useMappingHeaderLogic.js';
+import { UI_LABELS, UI_MESSAGES } 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 = ({
+  ssMappingData,
+  configuration,
+  hasFieldsChanged,
+  isEditConfirmationOpen,
+  editField,
+  importResponse,
+  hasExistingMapping,
+  isMappingPage,
+  navigateConfigPage,
+  onSaveHandler,
+  previousMappingHandler,
+  saveConfiguration,
+  setIsEditConfirmationOpen
+}) => {
+  const { isButtonDisabled, isMappingPageDisabled } = useMappingHeaderLogic({
+    ssMappingData,
+    configuration,
+    hasFieldsChanged,
+    editField,
+    importResponse,
+    isMappingPage
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        position: "sticky",
+        top: 0,
+        zIndex: 100,
+        background: "#ffff",
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? UI_LABELS.EDIT_MAPPING : UI_LABELS.NEW_MAPPING)
+    ),
+    /* @__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 && navigateConfigPage()
+        },
+        UI_LABELS.CONFIGURATION
+      ),
+      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          disabled: isMappingPageDisabled(),
+          css: {
+            color: isMappingPage ? "$neutral900" : "$neutral800",
+            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+          },
+          color: "default",
+          variant: "ghost",
+          onClick: () => {
+            if (isMappingPage) {
+              onSaveHandler({});
+            } else {
+              saveConfiguration();
+            }
+          },
+          size: "md"
+        },
+        UI_LABELS.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "end", css: { width: "180px" } }, /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "lg",
+        disabled: isButtonDisabled(),
+        onClick: () => {
+          if (isMappingPage) {
+            if (editField == null ? void 0 : editField.id) {
+              setIsEditConfirmationOpen(true);
+            } else {
+              onSaveHandler({});
+            }
+          } else {
+            saveConfiguration();
+          }
+        }
+      },
+      isMappingPage ? (editField == null ? void 0 : editField.id) ? UI_LABELS.UPDATE_MAPPING : UI_LABELS.SAVE_MAPPING : UI_LABELS.CONTINUE_MAPPING
+    )),
+    isEditConfirmationOpen && /* @__PURE__ */ React__default.createElement(
+      EditConfirmation,
+      {
+        name: UI_MESSAGES.EDIT_CONFIRMATION_TITLE,
+        description: UI_MESSAGES.EDIT_CONFIRMATION_DESCRIPTION,
+        onConfirm: async () => {
+          await onSaveHandler({});
+          setIsEditConfirmationOpen(false);
+        },
+        onCancel: () => {
+          setIsEditConfirmationOpen(false);
+        }
+      }
+    )
+  );
+};
+
+export { MappingHeader };
+//# sourceMappingURL=MappingHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Flex,\n  IconButton,\n  Heading,\n  Button,\n} from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { MappingHeaderProps } from \"../types/mapping.types\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport { useMappingHeaderLogic } from \"../hooks/useMappingHeaderLogic\";\nimport { UI_LABELS, UI_MESSAGES } from \"../constants\";\n\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  ssMappingData,\n  configuration,\n  hasFieldsChanged,\n  isEditConfirmationOpen,\n  editField,\n  importResponse,\n  hasExistingMapping,\n  isMappingPage,\n  navigateConfigPage,\n  onSaveHandler,\n  previousMappingHandler,\n  saveConfiguration,\n  setIsEditConfirmationOpen,\n}) => {\n  const { isButtonDisabled, isMappingPageDisabled } = useMappingHeaderLogic({\n    ssMappingData,\n    configuration,\n    hasFieldsChanged,\n    editField,\n    importResponse,\n    isMappingPage,\n  });\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        top: 0,\n        zIndex: 100,\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasExistingMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler?.()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editField?.id ? UI_LABELS.EDIT_MAPPING : UI_LABELS.NEW_MAPPING}\n        </Heading>\n      </Flex>\n\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 && navigateConfigPage()}\n        >\n          {UI_LABELS.CONFIGURATION}\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingPageDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingPageDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={() => {\n            if (isMappingPage) {\n              onSaveHandler({});\n            } else {\n              saveConfiguration();\n            }\n          }}\n          size=\"md\"\n        >\n          {UI_LABELS.MAPPING}\n        </Button>\n      </Flex>\n\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button\n          size=\"lg\"\n          disabled={isButtonDisabled()}\n          onClick={() => {\n            if (isMappingPage) {\n              if (editField?.id) {\n                setIsEditConfirmationOpen(true);\n              } else {\n                onSaveHandler({});\n              }\n            } else {\n              saveConfiguration();\n            }\n          }}\n        >\n          {isMappingPage\n            ? editField?.id\n              ? UI_LABELS.UPDATE_MAPPING\n              : UI_LABELS.SAVE_MAPPING\n            : UI_LABELS.CONTINUE_MAPPING}\n        </Button>\n      </Flex>\n\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name={UI_MESSAGES.EDIT_CONFIRMATION_TITLE}\n          description={UI_MESSAGES.EDIT_CONFIRMATION_DESCRIPTION}\n          onConfirm={async () => {\n            await onSaveHandler({});\n            setIsEditConfirmationOpen(false);\n          }}\n          onCancel={() => {\n            setIsEditConfirmationOpen(false);\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["React","Arrow"],"mappings":"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"}

package/dist/es/single-mapping/components/TabsContentComponent.js

@@ -0,0 +1,101 @@
+import React__default from 'react';
+import { filterFieldsBySearch } from '../utils/mapping.utils.js';
+import { UI_LABELS } from '../constants/index.js';
+import { TabsContent } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.js';
+import { Input } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
+import { SearchIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.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 { Checkbox } from '../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js';
+import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+
+const TabsContentComponent = ({
+  value,
+  searchInput,
+  setSearchInput,
+  fields,
+  handleFieldValues,
+  placeholder
+}) => {
+  const mappingFields = filterFieldsBySearch(fields, searchInput);
+  return /* @__PURE__ */ React__default.createElement(TabsContent, { value, css: { padding: 0, position: "relative" } }, /* @__PURE__ */ React__default.createElement(
+    Input,
+    {
+      leftIcon: /* @__PURE__ */ React__default.createElement(SearchIcon, { color: "#848484" }),
+      variant: "filled",
+      placeholder: `${UI_LABELS.SEARCH} ${placeholder}`,
+      size: "lg",
+      css: { marginTop: "$8" },
+      value: searchInput,
+      onChange: (event) => setSearchInput(event.currentTarget.value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      css: {
+        padding: "$8 $4 $32 $4",
+        marginTop: "$8",
+        height: "calc(100vh - 408px)",
+        overflow: "auto",
+        scrollbarWidth: "thin",
+        "&::-webkit-scrollbar": {
+          width: "4px"
+        },
+        "& label": {
+          lineHeight: "$sm"
+        }
+      },
+      flexDirection: "column",
+      gap: "$8"
+    },
+    (mappingFields == null ? void 0 : mappingFields.length) > 1 ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.map((field) => /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        key: field.id,
+        css: {
+          label: {
+            color: "$neutral900",
+            fontSize: "$sm",
+            maxWidth: "520px",
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Checkbox,
+        {
+          size: "sm",
+          checked: field.isEnabled,
+          onChange: (value2) => handleFieldValues(field, value2)
+        },
+        field.name
+      )
+    ))) : /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        css: { marginTop: "$40" }
+      },
+      /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, UI_LABELS.NO_RESULTS_FOUND)
+    )
+  ), /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        position: "absolute",
+        pointerEvents: "none",
+        top: "88%",
+        height: "$25",
+        width: "100%",
+        background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
+      }
+    }
+  ));
+};
+
+export { TabsContentComponent };
+//# sourceMappingURL=TabsContentComponent.js.map

package/dist/es/single-mapping/components/TabsContentComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContentComponent.js","sources":["../../../../src/single-mapping/components/TabsContentComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Box,\n  Flex,\n  Text,\n  Input,\n  Checkbox,\n  TabsContent,\n} from \"@sparrowengg/twigs-react\";\nimport { SearchIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { EventField } from \"../../commons/types/enhanced\";\nimport { filterFieldsBySearch } from \"../utils/mapping.utils\";\nimport { UI_LABELS } from \"../constants\";\n\ntype TabsContentComponentProps = {\n  value: string;\n  searchInput: string;\n  setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n  fields: EventField[];\n  handleFieldValues: (field: EventField, value: boolean) => void;\n  placeholder: string;\n};\n\nexport const TabsContentComponent: React.FC<TabsContentComponentProps> = ({\n  value,\n  searchInput,\n  setSearchInput,\n  fields,\n  handleFieldValues,\n  placeholder,\n}) => {\n  const mappingFields = filterFieldsBySearch(fields, searchInput);\n\n  return (\n    <TabsContent value={value} css={{ padding: 0, position: \"relative\" }}>\n      <Input\n        leftIcon={<SearchIcon color=\"#848484\" />}\n        variant=\"filled\"\n        placeholder={`${UI_LABELS.SEARCH} ${placeholder}`}\n        size=\"lg\"\n        css={{ marginTop: \"$8\" }}\n        value={searchInput}\n        onChange={(event) => setSearchInput(event.currentTarget.value)}\n      />\n      <Flex\n        css={{\n          padding: \"$8 $4 $32 $4\",\n          marginTop: \"$8\",\n          height: \"calc(100vh - 408px)\",\n          overflow: \"auto\",\n          scrollbarWidth: \"thin\",\n          \"&::-webkit-scrollbar\": {\n            width: \"4px\",\n          },\n          \"& label\": {\n            lineHeight: \"$sm\",\n          },\n        }}\n        flexDirection=\"column\"\n        gap=\"$8\"\n      >\n        {mappingFields?.length > 1 ? (\n          <>\n            {mappingFields.map((field) => (\n              <Box\n                key={field.id}\n                css={{\n                  label: {\n                    color: \"$neutral900\",\n                    fontSize: \"$sm\",\n                    maxWidth: \"520px\",\n                    display: \"block\",\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                  },\n                }}\n              >\n                <Checkbox\n                  size=\"sm\"\n                  checked={field.isEnabled}\n                  onChange={(value) => handleFieldValues(field, value as boolean)}\n                >\n                  {field.name}\n                </Checkbox>\n              </Box>\n            ))}\n          </>\n        ) : (\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            css={{ marginTop: \"$40\" }}\n          >\n            <Text size=\"sm\">{UI_LABELS.NO_RESULTS_FOUND}</Text>\n          </Flex>\n        )}\n      </Flex>\n      <Box\n        css={{\n          position: \"absolute\",\n          pointerEvents: \"none\",\n          top: \"88%\",\n          height: \"$25\",\n          width: \"100%\",\n          background:\n            \"linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))\",\n        }}\n      />\n    </TabsContent>\n  );\n};\n\n"],"names":["React","value"],"mappings":"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"}

package/dist/es/single-mapping/constants/index.js

@@ -0,0 +1,107 @@
+const IMPORT_METHODS = {
+  SEND_ALL_DATA: "SEND_ALL_DATA",
+  SELECTED_DATA: "SELECTED_DATA"
+};
+const DROPDOWN_TYPE = {
+  DATE: "date",
+  DATE_RANGE: "dateRange",
+  CUSTOM: "custom"
+};
+const CONFIGURATION_IDS = {
+  RESPONSE_IMPORT_SETTINGS: "responseImportSettings",
+  RESPONSE_IMPORT_TYPE: "responseImportType",
+  SPREADSHEET: "spreadsheet",
+  ACTION: "action",
+  MAPPED_FIELDS: "mappedFields"
+};
+const SELECT_ALL_LABELS = {
+  QUESTIONS: "Select all Questions",
+  VARIABLES: "Select all Variables",
+  CONTACT_PROPERTIES: "Select all Contact Properties",
+  EXPRESSIONS: "Select all Expressions",
+  PROPERTIES: "Select all Properties",
+  DERIVED_QUESTIONS: "Select all Derived Questions"
+};
+const FIELD_IDS = {
+  ALL: "ALL"
+};
+const DATE_FORMAT = {
+  CALENDAR: "YYYY-MM-DD",
+  DISPLAY: "MMM D, YYYY"
+};
+const THEME_CONFIG = {
+  fonts: {
+    body: "DM Sans, Roboto Mono, sans-serif",
+    heading: "DM Sans, Roboto Mono, sans-serif"
+  }
+};
+const STYLES = {
+  maxConfigWidth: 488,
+  maxMappingWidth: 650,
+  zIndexTooltip: "9999999 !important",
+  zIndexDropdown: "99 !important"
+};
+const UI_LABELS = {
+  EDIT_MAPPING: "Edit Mapping",
+  NEW_MAPPING: "New Mapping",
+  CONFIGURATION: "Configuration",
+  MAPPING: "Mapping",
+  UPDATE_MAPPING: "Update Mapping",
+  SAVE_MAPPING: "Save Mapping",
+  CONTINUE_MAPPING: "Continue, Mapping",
+  SELECT_IMPORT_DATA: "Select Import Data",
+  SEND_ALL_DATA: "Send all data",
+  SEND_SELECTED_DATA: "Send selected data",
+  THIS_INCLUDES: "This Includes:",
+  QUESTIONS: "Questions",
+  ENRICH: "Enrich",
+  VARIABLES: "Variables",
+  CONTACTS: "Contacts",
+  EXPRESSIONS: "Expressions",
+  PROPERTIES: "Properties",
+  EVENT_DETAILS: "Event Details",
+  SURVEY_NAME: "Survey Name:",
+  NO_RESULTS_FOUND: "No Results Found",
+  SEARCH: "Search",
+  ADD_ACCOUNT: "Add Account",
+  IN_USE_ADDON: "In Use (Add-on)",
+  CHOOSE: "Choose",
+  CANCEL: "Cancel",
+  APPLY: "Apply",
+  DAYS: "Days",
+  ERROR_FETCHING_MAPPING_DATA: "Error fetching mapping data:",
+  EXISTING_RESPONSES_IMPORTED: "Existing responses from {date} will be imported"
+};
+const UI_MESSAGES = {
+  EDIT_CONFIRMATION_TITLE: "Are you sure?",
+  EDIT_CONFIRMATION_DESCRIPTION: "Saving this updated mapping properties will generate new sheet with the revised mapping.",
+  INVALID_FORMAT: "Invalid format",
+  EXISTING_RESPONSES_IMPORTED: "Existing responses from {date} will be imported"
+};
+const TAB_VALUES = {
+  QUESTIONS: "QUESTIONS",
+  VARIABLE: "VARIABLE",
+  CONTACT: "CONTACT",
+  EXPRESSION: "EXPRESSION",
+  PROPERTY: "PROPERTY",
+  DERIVED_QUESTIONS: "DERIVED_QUESTIONS"
+};
+const PLACEHOLDER_LABELS = {
+  QUESTIONS: "Questions",
+  VARIABLES: "Variables",
+  CONTACTS: "Contacts",
+  EXPRESSIONS: "Expressions",
+  PROPERTIES: "Properties",
+  DERIVED_QUESTIONS: "Derived Questions"
+};
+const COLOR_CODES = {
+  QUESTIONS_BG: "#E5F2FF",
+  ENRICH_BG: "#E5F2FF",
+  VARIABLES_BG: "#E8F4E3",
+  CONTACTS_BG: "#FDEDE8",
+  EXPRESSIONS_BG: "#F1F1F1",
+  PROPERTIES_BG: "#4A9CA626"
+};
+
+export { COLOR_CODES, CONFIGURATION_IDS, DATE_FORMAT, DROPDOWN_TYPE, FIELD_IDS, IMPORT_METHODS, PLACEHOLDER_LABELS, SELECT_ALL_LABELS, STYLES, TAB_VALUES, THEME_CONFIG, UI_LABELS, UI_MESSAGES };
+//# sourceMappingURL=index.js.map

package/dist/es/single-mapping/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/single-mapping/constants/index.ts"],"sourcesContent":["export const IMPORT_METHODS = {\n  SEND_ALL_DATA: \"SEND_ALL_DATA\",\n  SELECTED_DATA: \"SELECTED_DATA\",\n} as const;\n\nexport const FIELD_TYPES = {\n  QUESTIONS: \"questions\",\n  VARIABLES: \"variables\",\n  CONTACT_PROPERTIES: \"contactProperties\",\n  EXPRESSIONS: \"expressions\",\n  PROPERTY: \"property\",\n  DERIVED_QUESTIONS: \"derivedQuestions\",\n} as const;\n\nexport const DROPDOWN_TYPE = {\n  DATE: \"date\",\n  DATE_RANGE: \"dateRange\",\n  CUSTOM: \"custom\",\n} as const;\n\nexport const CONFIGURATION_IDS = {\n  RESPONSE_IMPORT_SETTINGS: \"responseImportSettings\",\n  RESPONSE_IMPORT_TYPE: \"responseImportType\",\n  SPREADSHEET: \"spreadsheet\",\n  ACTION: \"action\",\n  MAPPED_FIELDS: \"mappedFields\",\n} as const;\n\nexport const SELECT_ALL_LABELS = {\n  QUESTIONS: \"Select all Questions\",\n  VARIABLES: \"Select all Variables\",\n  CONTACT_PROPERTIES: \"Select all Contact Properties\",\n  EXPRESSIONS: \"Select all Expressions\",\n  PROPERTIES: \"Select all Properties\",\n  DERIVED_QUESTIONS: \"Select all Derived Questions\",\n} as const;\n\nexport const FIELD_IDS = {\n  ALL: \"ALL\",\n} as const;\n\nexport const DATE_FORMAT = {\n  CALENDAR: \"YYYY-MM-DD\",\n  DISPLAY: \"MMM D, YYYY\",\n} as const;\n\nexport const THEME_CONFIG = {\n  fonts: {\n    body: \"DM Sans, Roboto Mono, sans-serif\",\n    heading: \"DM Sans, Roboto Mono, sans-serif\",\n  },\n} as const;\n\nexport const STYLES = {\n  maxConfigWidth: 488,\n  maxMappingWidth: 650,\n  zIndexTooltip: \"9999999 !important\",\n  zIndexDropdown: \"99 !important\",\n} as const;\n\nexport const UI_LABELS = {\n  EDIT_MAPPING: \"Edit Mapping\",\n  NEW_MAPPING: \"New Mapping\",\n  CONFIGURATION: \"Configuration\",\n  MAPPING: \"Mapping\",\n  UPDATE_MAPPING: \"Update Mapping\",\n  SAVE_MAPPING: \"Save Mapping\",\n  CONTINUE_MAPPING: \"Continue, Mapping\",\n  SELECT_IMPORT_DATA: \"Select Import Data\",\n  SEND_ALL_DATA: \"Send all data\",\n  SEND_SELECTED_DATA: \"Send selected data\",\n  THIS_INCLUDES: \"This Includes:\",\n  QUESTIONS: \"Questions\",\n  ENRICH: \"Enrich\",\n  VARIABLES: \"Variables\",\n  CONTACTS: \"Contacts\",\n  EXPRESSIONS: \"Expressions\",\n  PROPERTIES: \"Properties\",\n  EVENT_DETAILS: \"Event Details\",\n  SURVEY_NAME: \"Survey Name:\",\n  NO_RESULTS_FOUND: \"No Results Found\",\n  SEARCH: \"Search\",\n  ADD_ACCOUNT: \"Add Account\",\n  IN_USE_ADDON: \"In Use (Add-on)\",\n  CHOOSE: \"Choose\",\n  CANCEL: \"Cancel\",\n  APPLY: \"Apply\",\n  DAYS: \"Days\",\n  ERROR_FETCHING_MAPPING_DATA: \"Error fetching mapping data:\",\n  EXISTING_RESPONSES_IMPORTED: \"Existing responses from {date} will be imported\",\n} as const;\n\nexport const UI_MESSAGES = {\n  EDIT_CONFIRMATION_TITLE: \"Are you sure?\",\n  EDIT_CONFIRMATION_DESCRIPTION: \"Saving this updated mapping properties will generate new sheet with the revised mapping.\",\n  INVALID_FORMAT: \"Invalid format\",\n  EXISTING_RESPONSES_IMPORTED: \"Existing responses from {date} will be imported\",\n} as const;\n\nexport const TAB_VALUES = {\n  QUESTIONS: \"QUESTIONS\",\n  VARIABLE: \"VARIABLE\",\n  CONTACT: \"CONTACT\",\n  EXPRESSION: \"EXPRESSION\",\n  PROPERTY: \"PROPERTY\",\n  DERIVED_QUESTIONS: \"DERIVED_QUESTIONS\",\n} as const;\n\nexport const PLACEHOLDER_LABELS = {\n  QUESTIONS: \"Questions\",\n  VARIABLES: \"Variables\",\n  CONTACTS: \"Contacts\",\n  EXPRESSIONS: \"Expressions\",\n  PROPERTIES: \"Properties\",\n  DERIVED_QUESTIONS: \"Derived Questions\",\n} as const;\n\nexport const COLOR_CODES = {\n  QUESTIONS_BG: \"#E5F2FF\",\n  ENRICH_BG: \"#E5F2FF\",\n  VARIABLES_BG: \"#E8F4E3\",\n  CONTACTS_BG: \"#FDEDE8\",\n  EXPRESSIONS_BG: \"#F1F1F1\",\n  PROPERTIES_BG: \"#4A9CA626\",\n} as const;\n\n"],"names":[],"mappings":"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"}

package/dist/es/single-mapping/hooks/useEditMode.js

@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback } from 'react';
+import { deepClone, areObjectsEqual } from '../utils/mapping.utils.js';
+
+const useEditMode = ({
+  editField,
+  importResponse: importResponse2,
+  configuration,
+  navigateMappingPage
+}) => {
+  const [originalMappingData, setOriginalMappingData] = useState(
+    null
+  );
+  const [originalConfigurationFields, setOriginalConfigurationFields] = useState(null);
+  const [originalConfiguredFields, setOriginalConfiguredFields] = useState(null);
+  const [originalImportResponse, setOriginalImportResponse] = useState(null);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  useEffect(() => {
+    if (editField == null ? void 0 : editField.id) {
+      navigateMappingPage(true);
+      setOriginalConfigurationFields(deepClone(configuration.configurationFields));
+      setOriginalConfiguredFields(deepClone(configuration.configuredFields));
+      setOriginalImportResponse(deepClone(importResponse2));
+    }
+  }, [editField == null ? void 0 : editField.id]);
+  const hasFieldsChanged = useCallback(
+    (ssMappingData) => {
+      if (!(editField == null ? void 0 : editField.id) || !originalMappingData)
+        return true;
+      const mappingDataChanged = !areObjectsEqual(ssMappingData, originalMappingData);
+      const importResponseChanged = !areObjectsEqual(
+        deepClone(importResponse2),
+        originalImportResponse
+      );
+      const configFieldsChanged = !areObjectsEqual(
+        configuration.configurationFields,
+        originalConfigurationFields
+      );
+      const configuredFieldsChanged = !areObjectsEqual(
+        configuration.configuredFields,
+        originalConfiguredFields
+      );
+      return configFieldsChanged || configuredFieldsChanged || importResponseChanged || !isInitialLoad && mappingDataChanged;
+    },
+    [
+      editField == null ? void 0 : editField.id,
+      originalMappingData,
+      originalConfigurationFields,
+      originalConfiguredFields,
+      originalImportResponse,
+      isInitialLoad,
+      importResponse2,
+      configuration
+    ]
+  );
+  return {
+    originalMappingData,
+    setOriginalMappingData,
+    isInitialLoad,
+    setIsInitialLoad,
+    hasFieldsChanged
+  };
+};
+
+export { useEditMode };
+//# sourceMappingURL=useEditMode.js.map

package/dist/es/single-mapping/hooks/useEditMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditMode.js","sources":["../../../../src/single-mapping/hooks/useEditMode.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { deepClone, areObjectsEqual } from \"../utils/mapping.utils\";\nimport { EditField, importResponse } from \"../types/mapping.types\";\nimport { SingleMappingConfiguration } from \"../types/configuration.types\";\n\ntype UseEditModeProps = {\n  editField?: EditField;\n  importResponse: importResponse;\n  configuration: SingleMappingConfiguration;\n  navigateMappingPage: (value?: boolean) => void;\n};\n\nexport const useEditMode = ({\n  editField,\n  importResponse,\n  configuration,\n  navigateMappingPage,\n}: UseEditModeProps) => {\n  const [originalMappingData, setOriginalMappingData] = useState<MappingData | null>(\n    null\n  );\n  const [originalConfigurationFields, setOriginalConfigurationFields] =\n    useState<any>(null);\n  const [originalConfiguredFields, setOriginalConfiguredFields] = useState<any>(null);\n  const [originalImportResponse, setOriginalImportResponse] = useState<any>(null);\n  const [isInitialLoad, setIsInitialLoad] = useState(true);\n\n  /**\n   * Initialize edit mode - store original state\n   */\n  useEffect(() => {\n    if (editField?.id) {\n      navigateMappingPage(true);\n      setOriginalConfigurationFields(deepClone(configuration.configurationFields));\n      setOriginalConfiguredFields(deepClone(configuration.configuredFields));\n      setOriginalImportResponse(deepClone(importResponse));\n    }\n  }, [editField?.id]);\n\n  /**\n   * Check if any field values have changed in edit mode\n   */\n  const hasFieldsChanged = useCallback(\n    (ssMappingData: MappingData): boolean => {\n      if (!editField?.id || !originalMappingData) return true;\n\n      const mappingDataChanged = !areObjectsEqual(ssMappingData, originalMappingData);\n      const importResponseChanged = !areObjectsEqual(\n        deepClone(importResponse),\n        originalImportResponse\n      );\n      const configFieldsChanged = !areObjectsEqual(\n        configuration.configurationFields,\n        originalConfigurationFields\n      );\n      const configuredFieldsChanged = !areObjectsEqual(\n        configuration.configuredFields,\n        originalConfiguredFields\n      );\n\n      return (\n        configFieldsChanged ||\n        configuredFieldsChanged ||\n        importResponseChanged ||\n        (!isInitialLoad && mappingDataChanged)\n      );\n    },\n    [\n      editField?.id,\n      originalMappingData,\n      originalConfigurationFields,\n      originalConfiguredFields,\n      originalImportResponse,\n      isInitialLoad,\n      importResponse,\n      configuration,\n    ]\n  );\n\n  return {\n    originalMappingData,\n    setOriginalMappingData,\n    isInitialLoad,\n    setIsInitialLoad,\n    hasFieldsChanged,\n  };\n};\n\n"],"names":["importResponse"],"mappings":";;;AAaO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAA;AAAA,EACA,cAAAA,EAAAA,eAAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AACF,CAAwB,KAAA;AACtB,EAAM,MAAA,CAAC,mBAAqB,EAAA,sBAAsB,CAAI,GAAA,QAAA;AAAA,IACpD,IAAA;AAAA,GACF,CAAA;AACA,EAAA,MAAM,CAAC,2BAAA,EAA6B,8BAA8B,CAAA,GAChE,SAAc,IAAI,CAAA,CAAA;AACpB,EAAA,MAAM,CAAC,wBAAA,EAA0B,2BAA2B,CAAA,GAAI,SAAc,IAAI,CAAA,CAAA;AAClF,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAI,SAAc,IAAI,CAAA,CAAA;AAC9E,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAKvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,EAAI,EAAA;AACjB,MAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AACxB,MAA+B,8BAAA,CAAA,SAAA,CAAU,aAAc,CAAA,mBAAmB,CAAC,CAAA,CAAA;AAC3E,MAA4B,2BAAA,CAAA,SAAA,CAAU,aAAc,CAAA,gBAAgB,CAAC,CAAA,CAAA;AACrE,MAA0B,yBAAA,CAAA,SAAA,CAAUA,eAAc,CAAC,CAAA,CAAA;AAAA,KACrD;AAAA,GACC,EAAA,CAAC,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,EAAE,CAAC,CAAA,CAAA;AAKlB,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,aAAwC,KAAA;AACvC,MAAI,IAAA,EAAC,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,EAAA,CAAA,IAAM,CAAC,mBAAA;AAAqB,QAAO,OAAA,IAAA,CAAA;AAEnD,MAAA,MAAM,kBAAqB,GAAA,CAAC,eAAgB,CAAA,aAAA,EAAe,mBAAmB,CAAA,CAAA;AAC9E,MAAA,MAAM,wBAAwB,CAAC,eAAA;AAAA,QAC7B,UAAUA,eAAc,CAAA;AAAA,QACxB,sBAAA;AAAA,OACF,CAAA;AACA,MAAA,MAAM,sBAAsB,CAAC,eAAA;AAAA,QAC3B,aAAc,CAAA,mBAAA;AAAA,QACd,2BAAA;AAAA,OACF,CAAA;AACA,MAAA,MAAM,0BAA0B,CAAC,eAAA;AAAA,QAC/B,aAAc,CAAA,gBAAA;AAAA,QACd,wBAAA;AAAA,OACF,CAAA;AAEA,MAAA,OACE,mBACA,IAAA,uBAAA,IACA,qBACC,IAAA,CAAC,aAAiB,IAAA,kBAAA,CAAA;AAAA,KAEvB;AAAA,IACA;AAAA,MACE,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,EAAA;AAAA,MACX,mBAAA;AAAA,MACA,2BAAA;AAAA,MACA,wBAAA;AAAA,MACA,sBAAA;AAAA,MACA,aAAA;AAAA,MACAA,eAAAA;AAAA,MACA,aAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}