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

package/dist/es/integration-template/components/dashboard/DashboardItem.js

@@ -0,0 +1,271 @@
+import React__default, { useState } from 'react';
+import ConfirmationModal from '../../../commons/components/confirmation-modal.js';
+import { ConditionCard } from '../../../mapping/utils/conditionDescriptionBuilder.js';
+import { DASHBOARD_UI_STRINGS } from '../dashboard-constants.js';
+import { getDefaultFieldValue } from '../dashboard-utils.js';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { ChevronDownIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-down.js';
+import { ChevronRightIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.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 { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Switch } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/switch/switch.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js';
+import { IconButton } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { EllipsisVerticalIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/ellipsis-vertical.js';
+import { PencilIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/pencil.js';
+import { DeleteIcon } from '../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js';
+import { Table, Thead, Th, Tbody, Tr, Td } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js';
+import { Button } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+
+const DashboardItem = ({
+  hasEditMapping,
+  isDraft,
+  onMappingEditHandler,
+  icon,
+  heading,
+  description,
+  fields,
+  integrationName,
+  isEnabled,
+  handleEditField,
+  id,
+  handleDashboardPage,
+  type,
+  toggleDashboardField,
+  deleteFieldHandler,
+  mappingConditions
+}) => {
+  var _a;
+  const [isMappingDisplayed, setIsMappingDisplayed] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const handleEdit = () => {
+    onMappingEditHandler(id);
+    handleEditField({
+      type,
+      values: fields,
+      id
+    });
+    handleDashboardPage(false, type);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", css: { marginTop: "$8" } }, /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      css: {
+        border: isMappingDisplayed ? "$borderWidths$xs solid $black400" : "$borderWidths$xs solid $neutral200",
+        borderRadius: isMappingDisplayed ? "$2xl $2xl 0 0" : "$2xl",
+        padding: "$10 $12",
+        width: "100%",
+        backgroundColor: isMappingDisplayed ? "rgba(100, 116, 139, 0.04)" : "$white900"
+      },
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: { cursor: "pointer" },
+        onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
+      },
+      isMappingDisplayed ? /* @__PURE__ */ React__default.createElement(ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React__default.createElement(ChevronRightIcon, { size: 40, color: "#848484" }),
+      /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React__default.createElement(Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", weight: "bold" }, heading), /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "sm",
+          css: {
+            "& span": { fontFamily: "'DM Sans', sans-serif !important" },
+            color: "$neutral600",
+            "& b": {
+              fontWeight: "$6 !important",
+              fontFamily: "'DM Sans', sans-serif !important"
+            }
+          },
+          dangerouslySetInnerHTML: { __html: description }
+        }
+      )))
+    ),
+    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React__default.createElement(Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        css: {
+          background: "$neutral500",
+          borderRadius: "50%",
+          marginRight: "$1",
+          width: "$4",
+          height: "$4"
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold", css: { color: "$neutral800" } }, DASHBOARD_UI_STRINGS.DRAFT)), /* @__PURE__ */ React__default.createElement(Box, { css: { width: "1px", height: "20px", background: "#64748B20" } })), /* @__PURE__ */ React__default.createElement(
+      Switch,
+      {
+        size: "md",
+        checked: isEnabled,
+        onChange: (value) => toggleDashboardField(id, value)
+      }
+    ), /* @__PURE__ */ React__default.createElement(DropdownMenu, null, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        variant: "ghost",
+        color: "default",
+        size: "lg",
+        icon: /* @__PURE__ */ React__default.createElement(EllipsisVerticalIcon, null)
+      }
+    )), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuContent,
+      {
+        className: "dm-sans",
+        css: {
+          minWidth: 180,
+          zIndex: 10,
+          "& p": { margin: "0 !important", padding: "0 !important" }
+        },
+        sideOffset: 4,
+        align: "end"
+      },
+      (hasEditMapping === void 0 || hasEditMapping) && /* @__PURE__ */ React__default.createElement(DropdownMenuItem, { css: { cursor: "pointer" }, onClick: handleEdit }, /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, DASHBOARD_UI_STRINGS.EDIT))),
+      /* @__PURE__ */ React__default.createElement(
+        DropdownMenuItem,
+        {
+          onClick: () => setIsDeleteModalOpen(true),
+          css: { cursor: "pointer" }
+        },
+        /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React__default.createElement(DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, DASHBOARD_UI_STRINGS.DELETE))
+      )
+    )))
+  ), /* @__PURE__ */ React__default.createElement(Box, { css: { height: isMappingDisplayed ? "100%" : 0 } }, /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        borderInline: "$borderWidths$xs solid $black400",
+        maxHeight: 432,
+        height: "100%",
+        position: "relative",
+        overflow: "auto"
+      }
+    },
+    (fields == null ? void 0 : fields.length) ? /* @__PURE__ */ React__default.createElement(Table, { css: { borderCollapse: "collapse", width: "100%" } }, /* @__PURE__ */ React__default.createElement(
+      Thead,
+      {
+        css: {
+          background: "$white900",
+          "& th": {
+            padding: "$7 $8",
+            fontSize: "$sm",
+            lineHeight: "$sm",
+            textAlign: "left",
+            borderInline: "none"
+          },
+          borderBottom: "$borderWidths$xs solid $neutral100",
+          position: "sticky",
+          top: 0,
+          zIndex: 10
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Th, { css: { paddingLeft: "$38 !important" } }, DASHBOARD_UI_STRINGS.TYPE),
+      /* @__PURE__ */ React__default.createElement(Th, null, DASHBOARD_UI_STRINGS.SURVEYSPARROW_FIELD),
+      /* @__PURE__ */ React__default.createElement(Th, null, DASHBOARD_UI_STRINGS.INTEGRATION_FIELD.replace(
+        "{integrationName}",
+        integrationName
+      )),
+      /* @__PURE__ */ React__default.createElement(Th, { css: { paddingRight: "$20 !important" } }, DASHBOARD_UI_STRINGS.DEFAULT_VALUE)
+    ), /* @__PURE__ */ React__default.createElement(
+      Tbody,
+      {
+        css: {
+          "& tr:last-child": {
+            borderBottom: 0,
+            "& td": { borderBottom: 0 }
+          }
+        }
+      },
+      fields.map((field, index) => {
+        var _a2, _b, _c, _d, _e, _f, _g;
+        return /* @__PURE__ */ React__default.createElement(
+          Tr,
+          {
+            key: index,
+            css: {
+              borderBottom: "$borderWidths$xs solid $neutral100",
+              "& td": {
+                padding: "$7 $8",
+                fontSize: "$sm",
+                lineHeight: "$sm",
+                borderInline: "none"
+              },
+              "&:hover": { background: "none !important" },
+              "& td:first-child": { paddingLeft: "$38 !important" },
+              "& td:last-child": { paddingRight: "$20 !important" }
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(Td, null, (_b = (_a2 = field.mappedType) == null ? void 0 : _a2.label) != null ? _b : "--"),
+          /* @__PURE__ */ React__default.createElement(Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
+          /* @__PURE__ */ React__default.createElement(Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
+          /* @__PURE__ */ React__default.createElement(Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
+        );
+      })
+    )) : null
+  ), isMappingDisplayed && /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        padding: "$8 $32",
+        border: "$borderWidths$xs solid $black400",
+        borderTop: hasEditMapping === void 0 || hasEditMapping ? "$borderWidths$xs solid $neutral200" : "none",
+        borderRadius: "0 0 $2xl $2xl",
+        height: "100%"
+      }
+    },
+    ((_a = mappingConditions == null ? void 0 : mappingConditions.filterGroups) == null ? void 0 : _a.length) ? /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        className: "dm-sans",
+        size: "sm",
+        weight: "bold",
+        css: {
+          textTransform: "uppercase",
+          color: "$neutral900",
+          fontFamily: "DM Sans !important",
+          paddingLeft: "$4"
+        }
+      },
+      DASHBOARD_UI_STRINGS.CONDITION
+    ), /* @__PURE__ */ React__default.createElement(Flex, { css: { marginTop: "$2 !important" } }, /* @__PURE__ */ React__default.createElement(
+      ConditionCard,
+      {
+        isEditable: false,
+        conditionsData: mappingConditions,
+        showMoreMenu: false
+      }
+    ))) : null,
+    /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "sm",
+        onClick: handleEdit,
+        css: {
+          visibility: hasEditMapping === void 0 || hasEditMapping ? "visible" : "hidden"
+        },
+        leftIcon: /* @__PURE__ */ React__default.createElement(PencilIcon, null),
+        color: "primary",
+        variant: "ghost"
+      },
+      `${DASHBOARD_UI_STRINGS.EDIT} ${heading}`
+    )
+  ))), isDeleteModalOpen && /* @__PURE__ */ React__default.createElement(
+    ConfirmationModal,
+    {
+      name: DASHBOARD_UI_STRINGS.DELETE_MAPPING_TITLE,
+      description: DASHBOARD_UI_STRINGS.DELETE_MAPPING_MESSAGE,
+      onConfirm: () => {
+        deleteFieldHandler(id);
+        setIsDeleteModalOpen(false);
+      },
+      onCancel: () => setIsDeleteModalOpen(false)
+    }
+  ));
+};
+
+export { DashboardItem };
+//# sourceMappingURL=DashboardItem.js.map

package/dist/es/integration-template/components/dashboard/DashboardItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardItem.js","sources":["../../../../../src/integration-template/components/dashboard/DashboardItem.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Chip,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  Flex,\n  IconButton,\n  Switch,\n  Table,\n  Tbody,\n  Td,\n  Text,\n  Th,\n  Thead,\n  Tr,\n} from \"@sparrowengg/twigs-react\";\nimport {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  DeleteIcon,\n  EllipsisVerticalIcon,\n  PencilIcon,\n} from \"@sparrowengg/twigs-react-icons\";\nimport React, { ReactNode, useState } from \"react\";\nimport ConfirmationModal from \"../../../commons/components/confirmation-modal\";\nimport { HandleEditField } from \"../../../commons/types/enhanced\";\nimport { ConditionCard } from \"../../../mapping/utils/conditionDescriptionBuilder\";\nimport { DASHBOARD_UI_STRINGS } from \"../dashboard-constants\";\nimport { getDefaultFieldValue } from \"../dashboard-utils\";\n\ntype DashboardItemProps = {\n  hasEditMapping?: boolean;\n  isDraft: boolean;\n  onMappingEditHandler: (id: string | number) => void;\n  icon: ReactNode;\n  heading: string;\n  description: string;\n  fields: any[];\n  isEnabled: boolean;\n  integrationName: string;\n  handleEditField: HandleEditField;\n  id: string | number;\n  handleDashboardPage: (value: boolean, type: string) => void;\n  type: string;\n  toggleDashboardField: (id: string | number, status: boolean) => void;\n  deleteFieldHandler: (id: string | number) => void;\n  mappingConditions?: any;\n};\n\nexport const DashboardItem: React.FC<DashboardItemProps> = ({\n  hasEditMapping,\n  isDraft,\n  onMappingEditHandler,\n  icon,\n  heading,\n  description,\n  fields,\n  integrationName,\n  isEnabled,\n  handleEditField,\n  id,\n  handleDashboardPage,\n  type,\n  toggleDashboardField,\n  deleteFieldHandler,\n  mappingConditions,\n}) => {\n  const [isMappingDisplayed, setIsMappingDisplayed] = useState(false);\n  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\n\n  const handleEdit = () => {\n    onMappingEditHandler(id);\n    handleEditField({\n      type,\n      values: fields,\n      id,\n    });\n    handleDashboardPage(false, type);\n  };\n\n  return (\n    <>\n      <Flex flexDirection=\"column\" css={{ marginTop: \"$8\" }}>\n        <Flex\n          css={{\n            border: isMappingDisplayed\n              ? \"$borderWidths$xs solid $black400\"\n              : \"$borderWidths$xs solid $neutral200\",\n            borderRadius: isMappingDisplayed ? \"$2xl $2xl 0 0\" : \"$2xl\",\n            padding: \"$10 $12\",\n            width: \"100%\",\n            backgroundColor: isMappingDisplayed ? \"rgba(100, 116, 139, 0.04)\" : \"$white900\",\n          }}\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n        >\n          <Flex\n            alignItems=\"center\"\n            gap=\"$4\"\n            css={{ cursor: \"pointer\" }}\n            onClick={() => setIsMappingDisplayed(!isMappingDisplayed)}\n          >\n            {isMappingDisplayed ? (\n              <ChevronDownIcon size={40} color=\"#848484\" />\n            ) : (\n              <ChevronRightIcon size={40} color=\"#848484\" />\n            )}\n            <Flex alignItems=\"center\" gap=\"$4\">\n              {icon}\n              <Flex gap=\"$1\" flexDirection=\"column\">\n                <Text size=\"md\" weight=\"bold\">\n                  {heading}\n                </Text>\n                <Text\n                  size=\"sm\"\n                  css={{\n                    \"& span\": { fontFamily: \"'DM Sans', sans-serif !important\" },\n                    color: \"$neutral600\",\n                    \"& b\": {\n                      fontWeight: \"$6 !important\",\n                      fontFamily: \"'DM Sans', sans-serif !important\",\n                    },\n                  }}\n                  dangerouslySetInnerHTML={{ __html: description }}\n                />\n              </Flex>\n            </Flex>\n          </Flex>\n          <Flex alignItems=\"center\" gap=\"$12\">\n            {isDraft && (\n              <Flex alignItems=\"center\" gap=\"$12\">\n                <Chip rounded=\"full\" size=\"sm\">\n                  <Box\n                    css={{\n                      background: \"$neutral500\",\n                      borderRadius: \"50%\",\n                      marginRight: \"$1\",\n                      width: \"$4\",\n                      height: \"$4\",\n                    }}\n                  />\n                  <Text size=\"sm\" weight=\"bold\" css={{ color: \"$neutral800\" }}>\n                    {DASHBOARD_UI_STRINGS.DRAFT}\n                  </Text>\n                </Chip>\n                <Box css={{ width: \"1px\", height: \"20px\", background: \"#64748B20\" }} />\n              </Flex>\n            )}\n            <Switch\n              size=\"md\"\n              checked={isEnabled}\n              onChange={(value) => toggleDashboardField(id, value)}\n            />\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <IconButton\n                  variant=\"ghost\"\n                  color=\"default\"\n                  size=\"lg\"\n                  icon={<EllipsisVerticalIcon />}\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"dm-sans\"\n                css={{\n                  minWidth: 180,\n                  zIndex: 10,\n                  \"& p\": { margin: \"0 !important\", padding: \"0 !important\" },\n                }}\n                sideOffset={4}\n                align=\"end\"\n              >\n                {(hasEditMapping === undefined || hasEditMapping) && (\n                  <DropdownMenuItem css={{ cursor: \"pointer\" }} onClick={handleEdit}>\n                    <Flex alignItems=\"center\" gap=\"$2\">\n                      <PencilIcon color=\"#6A6A6A\" size={20} />\n                      <Text size=\"sm\">{DASHBOARD_UI_STRINGS.EDIT}</Text>\n                    </Flex>\n                  </DropdownMenuItem>\n                )}\n                <DropdownMenuItem\n                  onClick={() => setIsDeleteModalOpen(true)}\n                  css={{ cursor: \"pointer\" }}\n                >\n                  <Flex alignItems=\"center\" gap=\"$2\">\n                    <DeleteIcon color=\"#6A6A6A\" size={20} />\n                    <Text size=\"sm\">{DASHBOARD_UI_STRINGS.DELETE}</Text>\n                  </Flex>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </Flex>\n        </Flex>\n        <Box css={{ height: isMappingDisplayed ? \"100%\" : 0 }}>\n          <Box\n            css={{\n              borderInline: \"$borderWidths$xs solid $black400\",\n              maxHeight: 432,\n              height: \"100%\",\n              position: \"relative\",\n              overflow: \"auto\",\n            }}\n          >\n            {fields?.length ? (\n              <Table css={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n                <Thead\n                  css={{\n                    background: \"$white900\",\n                    \"& th\": {\n                      padding: \"$7 $8\",\n                      fontSize: \"$sm\",\n                      lineHeight: \"$sm\",\n                      textAlign: \"left\",\n                      borderInline: \"none\",\n                    },\n                    borderBottom: \"$borderWidths$xs solid $neutral100\",\n                    position: \"sticky\",\n                    top: 0,\n                    zIndex: 10,\n                  }}\n                >\n                  <Th css={{ paddingLeft: \"$38 !important\" }}>{DASHBOARD_UI_STRINGS.TYPE}</Th>\n                  <Th>{DASHBOARD_UI_STRINGS.SURVEYSPARROW_FIELD}</Th>\n                  <Th>\n                    {DASHBOARD_UI_STRINGS.INTEGRATION_FIELD.replace(\n                      \"{integrationName}\",\n                      integrationName\n                    )}\n                  </Th>\n                  <Th css={{ paddingRight: \"$20 !important\" }}>\n                    {DASHBOARD_UI_STRINGS.DEFAULT_VALUE}\n                  </Th>\n                </Thead>\n                <Tbody\n                  css={{\n                    \"& tr:last-child\": {\n                      borderBottom: 0,\n                      \"& td\": { borderBottom: 0 },\n                    },\n                  }}\n                >\n                  {fields.map((field: any, index: number) => (\n                    <Tr\n                      key={index}\n                      css={{\n                        borderBottom: \"$borderWidths$xs solid $neutral100\",\n                        \"& td\": {\n                          padding: \"$7 $8\",\n                          fontSize: \"$sm\",\n                          lineHeight: \"$sm\",\n                          borderInline: \"none\",\n                        },\n                        \"&:hover\": { background: \"none !important\" },\n                        \"& td:first-child\": { paddingLeft: \"$38 !important\" },\n                        \"& td:last-child\": { paddingRight: \"$20 !important\" },\n                      }}\n                    >\n                      <Td>{field.mappedType?.label ?? \"--\"}</Td>\n                      <Td>{field.surveySparrowField?.label ?? \"--\"}</Td>\n                      <Td>{field.integrationField?.label ?? \"--\"}</Td>\n                      <Td>{getDefaultFieldValue(field.defaultValue) ?? \"--\"}</Td>\n                    </Tr>\n                  ))}\n                </Tbody>\n              </Table>\n            ) : null}\n          </Box>\n          {isMappingDisplayed && (\n            <Box\n              css={{\n                padding: \"$8 $32\",\n                border: \"$borderWidths$xs solid $black400\",\n                borderTop:\n                  hasEditMapping === undefined || hasEditMapping\n                    ? \"$borderWidths$xs solid $neutral200\"\n                    : \"none\",\n                borderRadius: \"0 0 $2xl $2xl\",\n                height: \"100%\",\n              }}\n            >\n              {mappingConditions?.filterGroups?.length ? (\n                <Flex flexDirection=\"column\" justifyContent=\"center\">\n                  <Text\n                    className=\"dm-sans\"\n                    size=\"sm\"\n                    weight=\"bold\"\n                    css={{\n                      textTransform: \"uppercase\",\n                      color: \"$neutral900\",\n                      fontFamily: \"DM Sans !important\",\n                      paddingLeft: \"$4\",\n                    }}\n                  >\n                    {DASHBOARD_UI_STRINGS.CONDITION}\n                  </Text>\n                  <Flex css={{ marginTop: \"$2 !important\" }}>\n                    <ConditionCard\n                      isEditable={false}\n                      conditionsData={mappingConditions}\n                      showMoreMenu={false}\n                    />\n                  </Flex>\n                </Flex>\n              ) : null}\n              <Button\n                size=\"sm\"\n                onClick={handleEdit}\n                css={{\n                  visibility:\n                    hasEditMapping === undefined || hasEditMapping ? \"visible\" : \"hidden\",\n                }}\n                leftIcon={<PencilIcon />}\n                color=\"primary\"\n                variant=\"ghost\"\n              >\n                {`${DASHBOARD_UI_STRINGS.EDIT} ${heading}`}\n              </Button>\n            </Box>\n          )}\n        </Box>\n      </Flex>\n      {isDeleteModalOpen && (\n        <ConfirmationModal\n          name={DASHBOARD_UI_STRINGS.DELETE_MAPPING_TITLE}\n          description={DASHBOARD_UI_STRINGS.DELETE_MAPPING_MESSAGE}\n          onConfirm={() => {\n            deleteFieldHandler(id);\n            setIsDeleteModalOpen(false);\n          }}\n          onCancel={() => setIsDeleteModalOpen(false)}\n        />\n      )}\n    </>\n  );\n};\n\n"],"names":["React","_a"],"mappings":"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"}

package/dist/es/integration-template/components/dashboard/DropdownItem.js

@@ -1,5 +1,4 @@
 import React__default from 'react';
-import { MAX_DIMENSIONS } from '../../constants/dashboard.constants.js';
 import { Tooltip } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
 import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
 import { DropdownMenuItem } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js';
@@ -20,7 +19,7 @@ const DropdownItem = ({
       content: isDisabled ? toolTipContent : "",
       css: {
         zIndex: "99999999",
-        minWidth: `${MAX_DIMENSIONS.TOOLTIP_TEXT_WIDTH}px`,
+        minWidth: "280px",
         textAlign: "center"
       }
     },

package/dist/es/integration-template/components/dashboard/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/integration-template/components/dashboard/DropdownItem.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, DropdownMenuItem, Flex, Text, Tooltip } from '@sparrowengg/twigs-react';\nimport { DropdownItemProps } from '../../types/dashboard.types';\nimport { MAX_DIMENSIONS } from '../../constants/dashboard.constants';\n\n/**\n * DropdownItem - Custom dropdown menu item with icon and tooltip support\n */\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n  icon,\n  heading,\n  description,\n  onClickHandler,\n  isDisabled,\n  toolTipContent,\n}) => {\n  return (\n    <Tooltip\n      content={isDisabled ? toolTipContent : ''}\n      css={{\n        zIndex: '99999999',\n        minWidth: `${MAX_DIMENSIONS.TOOLTIP_TEXT_WIDTH}px`,\n        textAlign: 'center',\n      }}\n    >\n      <Flex>\n        <DropdownMenuItem\n          css={{ cursor: isDisabled ? 'not-allowed !important' : 'pointer' }}\n          onClick={onClickHandler}\n          disabled={isDisabled}\n        >\n          <Flex alignItems=\"flex-start\" gap=\"$4\">\n            <Box css={{ width: '$6' }}>{icon}</Box>\n            <Flex flexDirection=\"column\">\n              <Text size=\"md\">{heading}</Text>\n              <Text size=\"sm\" css={{ color: '$neutral700' }}>\n                {description}\n              </Text>\n            </Flex>\n          </Flex>\n        </DropdownMenuItem>\n      </Flex>\n    </Tooltip>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;;AAQO,MAAM,eAA4C,CAAC;AAAA,EACxD,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,aAAa,cAAiB,GAAA,EAAA;AAAA,MACvC,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,UAAA;AAAA,QACR,QAAA,EAAU,CAAG,EAAA,cAAA,CAAe,kBAAkB,CAAA,EAAA,CAAA;AAAA,QAC9C,SAAW,EAAA,QAAA;AAAA,OACb;AAAA,KAAA;AAAA,iDAEC,IACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,EAAE,MAAQ,EAAA,UAAA,GAAa,2BAA2B,SAAU,EAAA;AAAA,QACjE,OAAS,EAAA,cAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,OAAA;AAAA,mDAET,IAAK,EAAA,EAAA,UAAA,EAAW,YAAa,EAAA,GAAA,EAAI,wBAC/BA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,EAAE,OAAO,IAAK,EAAA,EAAA,EAAI,IAAK,CAAA,+CAChC,IAAK,EAAA,EAAA,aAAA,EAAc,QAClB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAK,EAAA,IAAA,EAAA,EAAM,OAAQ,CAAA,+CACxB,IAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAA,WACH,CACF,CACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DropdownItem.js","sources":["../../../../../src/integration-template/components/dashboard/DropdownItem.tsx"],"sourcesContent":["import {\n  Box,\n  DropdownMenuItem,\n  Flex,\n  Text,\n  Tooltip,\n} from \"@sparrowengg/twigs-react\";\nimport React, { ReactNode } from \"react\";\n\ntype DropdownItemProps = {\n  icon: ReactNode;\n  heading: string;\n  description: string;\n  onClickHandler: () => void;\n  isDisabled?: boolean;\n  toolTipContent: string;\n};\n\nexport const DropdownItem: React.FC<DropdownItemProps> = ({\n  icon,\n  heading,\n  description,\n  onClickHandler,\n  isDisabled,\n  toolTipContent,\n}) => {\n  return (\n    <Tooltip\n      content={isDisabled ? toolTipContent : \"\"}\n      css={{\n        zIndex: \"99999999\",\n        minWidth: \"280px\",\n        textAlign: \"center\",\n      }}\n    >\n      <Flex>\n        <DropdownMenuItem\n          css={{ cursor: isDisabled ? \"not-allowed !important\" : \"pointer\" }}\n          onClick={onClickHandler}\n          disabled={isDisabled}\n        >\n          <Flex alignItems=\"flex-start\" gap=\"$4\">\n            <Box css={{ width: \"$6\" }}>{icon}</Box>\n            <Flex flexDirection=\"column\">\n              <Text size=\"md\">{heading}</Text>\n              <Text size=\"sm\" css={{ color: \"$neutral700\" }}>\n                {description}\n              </Text>\n            </Flex>\n          </Flex>\n        </DropdownMenuItem>\n      </Flex>\n    </Tooltip>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;AAkBO,MAAM,eAA4C,CAAC;AAAA,EACxD,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,aAAa,cAAiB,GAAA,EAAA;AAAA,MACvC,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,UAAA;AAAA,QACR,QAAU,EAAA,OAAA;AAAA,QACV,SAAW,EAAA,QAAA;AAAA,OACb;AAAA,KAAA;AAAA,iDAEC,IACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,EAAE,MAAQ,EAAA,UAAA,GAAa,2BAA2B,SAAU,EAAA;AAAA,QACjE,OAAS,EAAA,cAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,OAAA;AAAA,mDAET,IAAK,EAAA,EAAA,UAAA,EAAW,YAAa,EAAA,GAAA,EAAI,wBAC/BA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,EAAE,OAAO,IAAK,EAAA,EAAA,EAAI,IAAK,CAAA,+CAChC,IAAK,EAAA,EAAA,aAAA,EAAc,QAClB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAK,EAAA,IAAA,EAAA,EAAM,OAAQ,CAAA,+CACxB,IAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAA,WACH,CACF,CACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/es/integration-template/components/dashboard/EventComponent.js

@@ -19,7 +19,7 @@ const EventComponent = ({
         marginInline: "$4"
       }
     }
-  )), /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral700" } }, heading, " :"), !!hasLink ? /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Flex, { gap: "$2" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { color: "$neutral700" } }, heading), !!hasLink ? /* @__PURE__ */ React__default.createElement(
     Text,
     {
       size: "sm",

package/dist/es/integration-template/components/dashboard/EventComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventComponent.js","sources":["../../../../../src/integration-template/components/dashboard/EventComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Flex, Text } from '@sparrowengg/twigs-react';\nimport { EventComponentProps } from '../../types/dashboard.types';\n\n/**\n * EventComponent - Displays event details with optional border and link\n */\nexport const EventComponent: React.FC<EventComponentProps> = ({\n  heading,\n  description,\n  hasBorder,\n  hasLink = '',\n}) => {\n  return (\n    <Flex alignItems=\"center\">\n      {hasBorder && (\n        <Box css={{ paddingInline: '$3' }}>\n          <Box\n            css={{\n              height: '$3',\n              width: '1px',\n              background: '$neutral200',\n              marginInline: '$4',\n            }}\n          />\n        </Box>\n      )}\n      <Flex gap=\"$2\">\n        <Text size=\"sm\" css={{ color: '$neutral700' }}>\n          {heading} :\n        </Text>\n        {!!hasLink ? (\n          <Text\n            size=\"sm\"\n            weight=\"medium\"\n            css={{\n              color: '$primary500',\n              textDecoration: 'underline',\n              cursor: 'pointer',\n              '&:hover': {\n                color: '$primary600 !important',\n              },\n            }}\n            onClick={() => window.open(`${hasLink}`, '_blank')}\n          >\n            {description}\n          </Text>\n        ) : (\n          <Text size=\"sm\" weight=\"medium\" css={{ color: '$neutral800' }}>\n            {description}\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;AAOO,MAAM,iBAAgD,CAAC;AAAA,EAC5D,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,EAAA;AACZ,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,UAAA,EAAW,QACd,EAAA,EAAA,SAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,EAAE,aAAe,EAAA,IAAA,EACzB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,IAAA;AAAA,QACR,KAAO,EAAA,KAAA;AAAA,QACP,UAAY,EAAA,aAAA;AAAA,QACZ,YAAc,EAAA,IAAA;AAAA,OAChB;AAAA,KAAA;AAAA,GAEJ,mBAEDA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,KAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,eAC3B,EAAA,EAAA,OAAA,EAAQ,IACX,CACC,EAAA,CAAC,CAAC,OACD,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,MAAO,EAAA,QAAA;AAAA,MACP,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,aAAA;AAAA,QACP,cAAgB,EAAA,WAAA;AAAA,QAChB,MAAQ,EAAA,SAAA;AAAA,QACR,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,wBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,SAAS,MAAM,MAAA,CAAO,KAAK,CAAG,EAAA,OAAO,IAAI,QAAQ,CAAA;AAAA,KAAA;AAAA,IAEhD,WAAA;AAAA,GAGH,mBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,MAAK,MAAO,EAAA,QAAA,EAAS,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAC3C,EAAA,EAAA,WACH,CAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"EventComponent.js","sources":["../../../../../src/integration-template/components/dashboard/EventComponent.tsx"],"sourcesContent":["import { Box, Flex, Text } from \"@sparrowengg/twigs-react\";\nimport React from \"react\";\n\ntype EventComponentProps = {\n  heading: string;\n  description: string;\n  hasBorder?: boolean;\n  hasLink?: boolean | string;\n};\n\nexport const EventComponent: React.FC<EventComponentProps> = ({\n  heading,\n  description,\n  hasBorder,\n  hasLink = \"\",\n}) => {\n  return (\n    <Flex alignItems=\"center\">\n      {hasBorder && (\n        <Box css={{ paddingInline: \"$3\" }}>\n          <Box\n            css={{\n              height: \"$3\",\n              width: \"1px\",\n              background: \"$neutral200\",\n              marginInline: \"$4\",\n            }}\n          />\n        </Box>\n      )}\n      <Flex gap=\"$2\">\n        <Text size=\"sm\" css={{ color: \"$neutral700\" }}>\n          {heading}\n        </Text>\n        {!!hasLink ? (\n          <Text\n            size=\"sm\"\n            weight=\"medium\"\n            css={{\n              color: \"$primary500\",\n              textDecoration: \"underline\",\n              cursor: \"pointer\",\n              \"&:hover\": {\n                color: \"$primary600 !important\",\n              },\n            }}\n            onClick={() => window.open(`${hasLink}`, \"_blank\")}\n          >\n            {description}\n          </Text>\n        ) : (\n          <Text size=\"sm\" weight=\"medium\" css={{ color: \"$neutral800\" }}>\n            {description}\n          </Text>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;AAUO,MAAM,iBAAgD,CAAC;AAAA,EAC5D,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,EAAA;AACZ,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,UAAA,EAAW,QACd,EAAA,EAAA,SAAA,oBACEA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,EAAE,aAAe,EAAA,IAAA,EACzB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,IAAA;AAAA,QACR,KAAO,EAAA,KAAA;AAAA,QACP,UAAY,EAAA,aAAA;AAAA,QACZ,YAAc,EAAA,IAAA;AAAA,OAChB;AAAA,KAAA;AAAA,GAEJ,CAEF,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,GAAI,EAAA,IAAA,EAAA,+CACP,IAAK,EAAA,EAAA,IAAA,EAAK,MAAK,GAAK,EAAA,EAAE,OAAO,aAAc,EAAA,EAAA,EACzC,OACH,CACC,EAAA,CAAC,CAAC,OACD,mBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,MAAO,EAAA,QAAA;AAAA,MACP,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,aAAA;AAAA,QACP,cAAgB,EAAA,WAAA;AAAA,QAChB,MAAQ,EAAA,SAAA;AAAA,QACR,SAAW,EAAA;AAAA,UACT,KAAO,EAAA,wBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,SAAS,MAAM,MAAA,CAAO,KAAK,CAAG,EAAA,OAAO,IAAI,QAAQ,CAAA;AAAA,KAAA;AAAA,IAEhD,WAAA;AAAA,GAGH,mBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,MAAK,MAAO,EAAA,QAAA,EAAS,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAC3C,EAAA,EAAA,WACH,CAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/integration-template/components/dashboard/MultiAccountFallback.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { FALLBACK_MESSAGES } from '../../constants/dashboard.constants.js';
+import { DASHBOARD_UI_STRINGS } from '../dashboard-constants.js';
 import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.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';
@@ -18,7 +18,7 @@ const MultiAccountFallback = ({
       alignItems: "center",
       css: { paddingTop: 182 }
     },
-    /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, FALLBACK_MESSAGES.ZERO_ENTRIES_TITLE.replace("{type}", title)),
+    /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, DASHBOARD_UI_STRINGS.ZERO_ENTRIES.replace("{type}", title)),
     /* @__PURE__ */ React__default.createElement(
       Text,
       {
@@ -30,7 +30,7 @@ const MultiAccountFallback = ({
         },
         size: "md"
       },
-      FALLBACK_MESSAGES.CREATE_DESCRIPTION
+      DASHBOARD_UI_STRINGS.CREATE_MESSAGE
     ),
     /* @__PURE__ */ React__default.createElement(
       Button,
@@ -40,7 +40,7 @@ const MultiAccountFallback = ({
         variant: "outline",
         onClick: onClickHandler
       },
-      `New ${title}`
+      DASHBOARD_UI_STRINGS.NEW_ITEM.replace("{type}", title)
     )
   );
 };

package/dist/es/integration-template/components/dashboard/MultiAccountFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAccountFallback.js","sources":["../../../../../src/integration-template/components/dashboard/MultiAccountFallback.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Flex, Heading, Text } from '@sparrowengg/twigs-react';\nimport { PlusIcon } from '@sparrowengg/twigs-react-icons';\nimport { MultiAccountFallbackProps } from '../../types/dashboard.types';\nimport { FALLBACK_MESSAGES, BUTTON_LABELS } from '../../constants/dashboard.constants';\n\n/**\n * MultiAccountFallback - Displays empty state for multi-account dashboard tabs\n */\nexport const MultiAccountFallback: React.FC<MultiAccountFallbackProps> = ({\n  title,\n  onClickHandler,\n}) => {\n  return (\n    <Flex\n      justifyContent=\"center\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      css={{ paddingTop: 182 }}\n    >\n      <Heading size=\"h5\">\n        {FALLBACK_MESSAGES.ZERO_ENTRIES_TITLE.replace('{type}', title)}\n      </Heading>\n      <Text\n        css={{\n          textAlign: 'center',\n          maxWidth: 400,\n          marginBlock: '$4 $12',\n          color: '$neutral800',\n        }}\n        size=\"md\"\n      >\n        {FALLBACK_MESSAGES.CREATE_DESCRIPTION}\n      </Text>\n      <Button\n        size=\"lg\"\n        leftIcon={<PlusIcon />}\n        variant=\"outline\"\n        onClick={onClickHandler}\n      >\n        {`New ${title}`}\n      </Button>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;;AASO,MAAM,uBAA4D,CAAC;AAAA,EACxE,KAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAe,EAAA,QAAA;AAAA,MACf,aAAc,EAAA,QAAA;AAAA,MACd,UAAW,EAAA,QAAA;AAAA,MACX,GAAA,EAAK,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,KAAA;AAAA,oBAEvBA,cAAA,CAAA,aAAA,CAAC,WAAQ,IAAK,EAAA,IAAA,EAAA,EACX,kBAAkB,kBAAmB,CAAA,OAAA,CAAQ,QAAU,EAAA,KAAK,CAC/D,CAAA;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,SAAW,EAAA,QAAA;AAAA,UACX,QAAU,EAAA,GAAA;AAAA,UACV,WAAa,EAAA,QAAA;AAAA,UACb,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,QACA,IAAK,EAAA,IAAA;AAAA,OAAA;AAAA,MAEJ,iBAAkB,CAAA,kBAAA;AAAA,KACrB;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,QAAA,+CAAW,QAAS,EAAA,IAAA,CAAA;AAAA,QACpB,OAAQ,EAAA,SAAA;AAAA,QACR,OAAS,EAAA,cAAA;AAAA,OAAA;AAAA,MAER,OAAO,KAAK,CAAA,CAAA;AAAA,KACf;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MultiAccountFallback.js","sources":["../../../../../src/integration-template/components/dashboard/MultiAccountFallback.tsx"],"sourcesContent":["import { Button, Flex, Heading, Text } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport React from \"react\";\nimport { DASHBOARD_UI_STRINGS } from \"../dashboard-constants\";\n\ntype MultiAccountFallbackProps = {\n  title: string;\n  onClickHandler: () => void;\n};\n\nexport const MultiAccountFallback: React.FC<MultiAccountFallbackProps> = ({\n  title,\n  onClickHandler,\n}) => {\n  return (\n    <Flex\n      justifyContent=\"center\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      css={{ paddingTop: 182 }}\n    >\n      <Heading size=\"h5\">\n        {DASHBOARD_UI_STRINGS.ZERO_ENTRIES.replace(\"{type}\", title)}\n      </Heading>\n      <Text\n        css={{\n          textAlign: \"center\",\n          maxWidth: 400,\n          marginBlock: \"$4 $12\",\n          color: \"$neutral800\",\n        }}\n        size=\"md\"\n      >\n        {DASHBOARD_UI_STRINGS.CREATE_MESSAGE}\n      </Text>\n      <Button\n        size=\"lg\"\n        leftIcon={<PlusIcon />}\n        variant=\"outline\"\n        onClick={onClickHandler}\n      >\n        {DASHBOARD_UI_STRINGS.NEW_ITEM.replace(\"{type}\", title)}\n      </Button>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;;AAUO,MAAM,uBAA4D,CAAC;AAAA,EACxE,KAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAe,EAAA,QAAA;AAAA,MACf,aAAc,EAAA,QAAA;AAAA,MACd,UAAW,EAAA,QAAA;AAAA,MACX,GAAA,EAAK,EAAE,UAAA,EAAY,GAAI,EAAA;AAAA,KAAA;AAAA,oBAEvBA,cAAA,CAAA,aAAA,CAAC,WAAQ,IAAK,EAAA,IAAA,EAAA,EACX,qBAAqB,YAAa,CAAA,OAAA,CAAQ,QAAU,EAAA,KAAK,CAC5D,CAAA;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,SAAW,EAAA,QAAA;AAAA,UACX,QAAU,EAAA,GAAA;AAAA,UACV,WAAa,EAAA,QAAA;AAAA,UACb,KAAO,EAAA,aAAA;AAAA,SACT;AAAA,QACA,IAAK,EAAA,IAAA;AAAA,OAAA;AAAA,MAEJ,oBAAqB,CAAA,cAAA;AAAA,KACxB;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,QAAA,+CAAW,QAAS,EAAA,IAAA,CAAA;AAAA,QACpB,OAAQ,EAAA,SAAA;AAAA,QACR,OAAS,EAAA,cAAA;AAAA,OAAA;AAAA,MAER,oBAAqB,CAAA,QAAA,CAAS,OAAQ,CAAA,QAAA,EAAU,KAAK,CAAA;AAAA,KACxD;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/es/integration-template/components/dashboard/SingleMappingChipWrapper.js

@@ -0,0 +1,73 @@
+import React__default, { useRef } from 'react';
+import { Flex } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Text } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Tooltip } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
+import { Chip } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
+import { Box } from '../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+
+const SingleMappingChipWrapper = ({
+  heading,
+  fields,
+  hideBorder,
+  placeholder,
+  backgroundColor
+}) => {
+  const modifiedFields = fields.filter((field) => field.id !== "ALL");
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, heading), /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      wrap: "wrap",
+      css: {
+        columnGap: "$2",
+        rowGap: "$4",
+        "& > * ": {
+          fontFamily: "'Roboto Mono', monospace !important",
+          fontWeight: "$4 !important"
+        }
+      }
+    },
+    modifiedFields.map((field) => {
+      var _a, _b;
+      const chipRef = useRef(null);
+      const name = `${!!placeholder ? placeholder : ""}${(_a = field == null ? void 0 : field.name) != null ? _a : field == null ? void 0 : field.label}`;
+      (_b = chipRef.current) == null ? void 0 : _b.offsetWidth;
+      return /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          key: field.id,
+          delayDuration: 300,
+          content: (name == null ? void 0 : name.length) > 52 ? name : "",
+          size: "md",
+          sideOffset: 4,
+          className: "dm-sans"
+        },
+        /* @__PURE__ */ React__default.createElement(
+          Chip,
+          {
+            ref: chipRef,
+            size: "md",
+            css: {
+              background: backgroundColor,
+              borderRadius: "4px !important",
+              span: {
+                textAlign: "center !important",
+                alignContent: "center !important",
+                display: "block",
+                maxWidth: "230px",
+                overflow: "hidden",
+                fontFamily: "'Roboto Mono', monospace !important",
+                fontWeight: "$4 !important",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            }
+          },
+          "$" + name
+        )
+      );
+    })
+  )), !hideBorder && /* @__PURE__ */ React__default.createElement(Box, { css: { marginBlock: "$4", height: "1px", background: "$neutral100" } }));
+};
+
+export { SingleMappingChipWrapper };
+//# sourceMappingURL=SingleMappingChipWrapper.js.map

package/dist/es/integration-template/components/dashboard/SingleMappingChipWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleMappingChipWrapper.js","sources":["../../../../../src/integration-template/components/dashboard/SingleMappingChipWrapper.tsx"],"sourcesContent":["import { Box, Chip, Flex, Text, Tooltip } from \"@sparrowengg/twigs-react\";\nimport React, { useRef } from \"react\";\nimport { EventField } from \"../../../commons/types/enhanced\";\n\ntype SingleMappingChipWrapperProps = {\n  heading: string;\n  fields: EventField[];\n  hideBorder?: boolean;\n  placeholder?: string;\n  backgroundColor: string;\n};\n\nexport const SingleMappingChipWrapper: React.FC<SingleMappingChipWrapperProps> = ({\n  heading,\n  fields,\n  hideBorder,\n  placeholder,\n  backgroundColor,\n}) => {\n  const modifiedFields = fields.filter((field: EventField) => field.id !== \"ALL\");\n\n  return (\n    <>\n      <Flex flexDirection=\"column\" gap=\"$6\" css={{ paddingBlock: \"$8\" }}>\n        <Text size=\"sm\" weight=\"bold\" css={{ textTransform: \"uppercase\" }}>\n          {heading}\n        </Text>\n        <Flex\n          wrap=\"wrap\"\n          css={{\n            columnGap: \"$2\",\n            rowGap: \"$4\",\n            \"& > * \": {\n              fontFamily: \"'Roboto Mono', monospace !important\",\n              fontWeight: \"$4 !important\",\n            },\n          }}\n        >\n          {modifiedFields.map((field: EventField) => {\n            const chipRef = useRef(null);\n            const name = `${!!placeholder ? placeholder : \"\"}${field?.name ?? field?.label}`;\n            const currentChipWidth = (chipRef.current as HTMLElement | null)?.offsetWidth;\n\n            return (\n              <Tooltip\n                key={field.id}\n                delayDuration={300}\n                content={name?.length > 52 ? name : \"\"}\n                size=\"md\"\n                sideOffset={4}\n                className=\"dm-sans\"\n              >\n                <Chip\n                  ref={chipRef}\n                  size=\"md\"\n                  css={{\n                    background: backgroundColor,\n                    borderRadius: \"4px !important\",\n                    span: {\n                      textAlign: \"center !important\",\n                      alignContent: \"center !important\",\n                      display: \"block\",\n                      maxWidth: \"230px\",\n                      overflow: \"hidden\",\n                      fontFamily: \"'Roboto Mono', monospace !important\",\n                      fontWeight: \"$4 !important\",\n                      textOverflow: \"ellipsis\",\n                      whiteSpace: \"nowrap\",\n                    },\n                  }}\n                >\n                  {\"$\" + name}\n                </Chip>\n              </Tooltip>\n            );\n          })}\n        </Flex>\n      </Flex>\n      {!hideBorder && (\n        <Box css={{ marginBlock: \"$4\", height: \"1px\", background: \"$neutral100\" }} />\n      )}\n    </>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}