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

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

@@ -1,8 +1,7 @@
 import React__default from 'react';
+import Arrow from '../../commons/icons/arrow.js';
 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 { hasMappingDataLength, hasMappingDataEnabled, areAllConfigFieldsFilled, isResponseImportSettingsValid } from '../utils/validation.utils.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';
@@ -24,24 +23,68 @@ const MappingHeader = ({
   saveConfiguration,
   setIsEditConfirmationOpen
 }) => {
-  const { isButtonDisabled, isMappingPageDisabled } = useMappingHeaderLogic({
-    ssMappingData,
-    configuration,
-    hasFieldsChanged,
-    editField,
-    importResponse,
-    isMappingPage
-  });
+  const isButtonDisabled = () => {
+    if (isMappingPage) {
+      return isMappingPageButtonDisabled();
+    }
+    return isConfigurationPageButtonDisabled();
+  };
+  const isMappingPageButtonDisabled = () => {
+    var _a;
+    if (editField == null ? void 0 : editField.id) {
+      return !hasFieldsChanged;
+    }
+    if (((_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.importMethod) === "SEND_ALL_DATA") {
+      return !hasMappingDataLength(ssMappingData);
+    }
+    return !hasMappingDataEnabled(ssMappingData);
+  };
+  const isConfigurationPageButtonDisabled = () => {
+    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);
+    const importSettingsValid = isResponseImportSettingsValid(
+      configuration.configurationFields,
+      configuration.configuredFields
+    );
+    return !allFieldsFilled || !importSettingsValid;
+  };
+  const isMappingNavigationDisabled = () => {
+    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);
+    const importSettingsValid = isResponseImportSettingsValid(
+      configuration.configurationFields,
+      configuration.configuredFields
+    );
+    return !allFieldsFilled || !importSettingsValid;
+  };
+  const handleSaveClick = () => {
+    if (isMappingPage) {
+      if (editField == null ? void 0 : editField.id) {
+        setIsEditConfirmationOpen(true);
+      } else {
+        onSaveHandler({});
+      }
+    } else {
+      saveConfiguration();
+    }
+  };
+  const handleMappingNavigation = () => {
+    if (isMappingPage) {
+      onSaveHandler({});
+    } else {
+      saveConfiguration();
+    }
+  };
+  const getButtonText = () => {
+    if (isMappingPage) {
+      return (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping";
+    }
+    return "Continue, Mapping";
+  };
   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"
       }
@@ -62,7 +105,7 @@ const MappingHeader = ({
           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(Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? "Edit Mapping" : "New Mapping")
     ),
     /* @__PURE__ */ React__default.createElement(
       Flex,
@@ -82,55 +125,31 @@ const MappingHeader = ({
           size: "md",
           onClick: () => isMappingPage && navigateConfigPage()
         },
-        UI_LABELS.CONFIGURATION
+        "Configuration"
       ),
-      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(Arrow, null),
       /* @__PURE__ */ React__default.createElement(
         Button,
         {
-          disabled: isMappingPageDisabled(),
+          disabled: isMappingNavigationDisabled(),
           css: {
             color: isMappingPage ? "$neutral900" : "$neutral800",
-            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+            cursor: isMappingNavigationDisabled() ? "not-allowed" : "pointer"
           },
           color: "default",
           variant: "ghost",
-          onClick: () => {
-            if (isMappingPage) {
-              onSaveHandler({});
-            } else {
-              saveConfiguration();
-            }
-          },
+          onClick: handleMappingNavigation,
           size: "md"
         },
-        UI_LABELS.MAPPING
+        "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
-    )),
+    /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "end", css: { width: "180px" } }, /* @__PURE__ */ React__default.createElement(Button, { size: "lg", disabled: isButtonDisabled(), onClick: handleSaveClick }, getButtonText())),
     isEditConfirmationOpen && /* @__PURE__ */ React__default.createElement(
       EditConfirmation,
       {
-        name: UI_MESSAGES.EDIT_CONFIRMATION_TITLE,
-        description: UI_MESSAGES.EDIT_CONFIRMATION_DESCRIPTION,
+        name: "Are you sure?",
+        description: "Saving this updated mapping properties will generate new sheet with the revised mapping.",
         onConfirm: async () => {
           await onSaveHandler({});
           setIsEditConfirmationOpen(false);

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

@@ -1 +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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"}
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box, Button, Flex, Heading, IconButton } from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon, ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationType } from \"../types/configuration.types\";\nimport {\n  hasMappingDataEnabled,\n  hasMappingDataLength,\n  areAllConfigFieldsFilled,\n  isResponseImportSettingsValid,\n} from \"../utils/validation.utils\";\n\ntype MappingHeaderProps = {\n  ssMappingData: MappingData;\n  configuration: ConfigurationType;\n  hasFieldsChanged: boolean;\n  isEditConfirmationOpen: boolean;\n  editField?: any;\n  importResponse: any;\n  hasExistingMapping: boolean;\n  isMappingPage: boolean;\n  navigateConfigPage: (value?: boolean) => void;\n  onSaveHandler: (fields: any) => void;\n  previousMappingHandler?: (value?: boolean) => void;\n  saveConfiguration: () => void;\n  setIsEditConfirmationOpen: (value: boolean) => void;\n};\n\n/**\n * Header component for the single mapping interface\n * Handles navigation between configuration and mapping pages\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 = (): boolean => {\n    if (isMappingPage) {\n      return isMappingPageButtonDisabled();\n    }\n    return isConfigurationPageButtonDisabled();\n  };\n\n  const isMappingPageButtonDisabled = (): boolean => {\n    // In edit mode, check if any fields have changed\n    if (editField?.id) {\n      return !hasFieldsChanged;\n    }\n\n    // Check import method\n    if ((importResponse?.value as any)?.importMethod === \"SEND_ALL_DATA\") {\n      return !hasMappingDataLength(ssMappingData);\n    }\n\n    return !hasMappingDataEnabled(ssMappingData);\n  };\n\n  const isConfigurationPageButtonDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const isMappingNavigationDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const handleSaveClick = () => {\n    if (isMappingPage) {\n      if (editField?.id) {\n        setIsEditConfirmationOpen(true);\n      } else {\n        onSaveHandler({});\n      }\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const handleMappingNavigation = () => {\n    if (isMappingPage) {\n      onSaveHandler({});\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const getButtonText = (): string => {\n    if (isMappingPage) {\n      return editField?.id ? \"Update Mapping\" : \"Save Mapping\";\n    }\n    return \"Continue, Mapping\";\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Back Button and Title */}\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 ? \"Edit Mapping\" : \"New Mapping\"}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Buttons */}\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          Configuration\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingNavigationDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingNavigationDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={handleMappingNavigation}\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button size=\"lg\" disabled={isButtonDisabled()} onClick={handleSaveClick}>\n          {getButtonText()}\n        </Button>\n      </Flex>\n\n      {/* Edit Confirmation Modal */}\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name=\"Are you sure?\"\n          description=\"Saving this updated mapping properties will generate new sheet with the revised mapping.\"\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"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { deepClone, areObjectsEqual } from '../utils/validation.utils.js';
+
+const useEditState = ({
+  editField,
+  configuration,
+  importResponse,
+  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(importResponse));
+    }
+  }, []);
+  const hasFieldsChanged = () => {
+    if (!(editField == null ? void 0 : editField.id) || !originalMappingData) {
+      return true;
+    }
+    const mappingDataChanged = !areObjectsEqual(
+      originalMappingData,
+      originalMappingData
+      // This will be compared with current state in the component
+    );
+    const importResponseChanged = !areObjectsEqual(
+      deepClone(importResponse),
+      originalImportResponse
+    );
+    const configFieldsChanged = !areObjectsEqual(
+      configuration.configurationFields,
+      originalConfigurationFields
+    );
+    const configuredFieldsChanged = !areObjectsEqual(
+      configuration.configuredFields,
+      originalConfiguredFields
+    );
+    return configFieldsChanged || configuredFieldsChanged || !isInitialLoad && mappingDataChanged || importResponseChanged;
+  };
+  return {
+    originalMappingData,
+    setOriginalMappingData,
+    isInitialLoad,
+    setIsInitialLoad,
+    hasFieldsChanged
+  };
+};
+
+export { useEditState };
+//# sourceMappingURL=useEditState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditState.js","sources":["../../../../src/single-mapping/hooks/useEditState.ts"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationFieldType } from \"../types/configuration.types\";\nimport { deepClone, areObjectsEqual } from \"../utils/validation.utils\";\n\ntype UseEditStateProps = {\n  editField: any;\n  configuration: {\n    configurationFields: Array<ConfigurationFieldType>;\n    configuredFields: Record<string, any>;\n  };\n  importResponse: any;\n  navigateMappingPage: (value?: boolean) => void;\n};\n\ntype UseEditStateReturn = {\n  originalMappingData: MappingData | null;\n  setOriginalMappingData: (data: MappingData | null) => void;\n  isInitialLoad: boolean;\n  setIsInitialLoad: (value: boolean) => void;\n  hasFieldsChanged: () => boolean;\n};\n\n/**\n * Custom hook to manage edit state and track changes\n */\nexport const useEditState = ({\n  editField,\n  configuration,\n  importResponse,\n  navigateMappingPage,\n}: UseEditStateProps): UseEditStateReturn => {\n  const [originalMappingData, setOriginalMappingData] = useState<MappingData | null>(null);\n  const [originalConfigurationFields, setOriginalConfigurationFields] = 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  useEffect(() => {\n    if (editField?.id) {\n      navigateMappingPage(true);\n      // Store original state when entering edit mode\n      setOriginalConfigurationFields(deepClone(configuration.configurationFields));\n      setOriginalConfiguredFields(deepClone(configuration.configuredFields));\n      setOriginalImportResponse(deepClone(importResponse));\n    }\n  }, []);\n\n  const hasFieldsChanged = (): boolean => {\n    // Not in edit mode or no original data\n    if (!editField?.id || !originalMappingData) {\n      return true;\n    }\n\n    // Check if mapping data has changed\n    const mappingDataChanged = !areObjectsEqual(\n      originalMappingData,\n      originalMappingData // This will be compared with current state in the component\n    );\n\n    const importResponseChanged = !areObjectsEqual(\n      deepClone(importResponse),\n      originalImportResponse\n    );\n\n    // Check if configuration fields have changed\n    const configFieldsChanged = !areObjectsEqual(\n      configuration.configurationFields,\n      originalConfigurationFields\n    );\n\n    // Check if configured fields have changed\n    const configuredFieldsChanged = !areObjectsEqual(\n      configuration.configuredFields,\n      originalConfiguredFields\n    );\n\n    return (\n      configFieldsChanged ||\n      configuredFieldsChanged ||\n      (!isInitialLoad && mappingDataChanged) ||\n      importResponseChanged\n    );\n  };\n\n  return {\n    originalMappingData,\n    setOriginalMappingData,\n    isInitialLoad,\n    setIsInitialLoad,\n    hasFieldsChanged,\n  };\n};\n\n"],"names":[],"mappings":";;;AA0BO,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AACF,CAA6C,KAAA;AAC3C,EAAA,MAAM,CAAC,mBAAA,EAAqB,sBAAsB,CAAA,GAAI,SAA6B,IAAI,CAAA,CAAA;AACvF,EAAA,MAAM,CAAC,2BAAA,EAA6B,8BAA8B,CAAA,GAAI,SAAc,IAAI,CAAA,CAAA;AACxF,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;AAEvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,EAAI,EAAA;AACjB,MAAA,mBAAA,CAAoB,IAAI,CAAA,CAAA;AAExB,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,CAAU,cAAc,CAAC,CAAA,CAAA;AAAA,KACrD;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,mBAAmB,MAAe;AAEtC,IAAA,IAAI,EAAC,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,EAAM,CAAA,IAAA,CAAC,mBAAqB,EAAA;AAC1C,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAGA,IAAA,MAAM,qBAAqB,CAAC,eAAA;AAAA,MAC1B,mBAAA;AAAA,MACA,mBAAA;AAAA;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,wBAAwB,CAAC,eAAA;AAAA,MAC7B,UAAU,cAAc,CAAA;AAAA,MACxB,sBAAA;AAAA,KACF,CAAA;AAGA,IAAA,MAAM,sBAAsB,CAAC,eAAA;AAAA,MAC3B,aAAc,CAAA,mBAAA;AAAA,MACd,2BAAA;AAAA,KACF,CAAA;AAGA,IAAA,MAAM,0BAA0B,CAAC,eAAA;AAAA,MAC/B,aAAc,CAAA,gBAAA;AAAA,MACd,wBAAA;AAAA,KACF,CAAA;AAEA,IAAA,OACE,mBACA,IAAA,uBAAA,IACC,CAAC,aAAA,IAAiB,kBACnB,IAAA,qBAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,GACF,CAAA;AACF;;;;"}