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

package/dist/es/integration-template/components/ConfigureTemplate.js

@@ -1,9 +1,8 @@
 import React__default from 'react';
 import CursorIcon from '../../commons/icons/cursor.js';
 import MappingIcon from '../../commons/icons/mapping.js';
+import { INTEGRATION_TEMPLATE_UI_STRINGS } from '../constants/ui-strings.js';
 import { TemplateCard } from './TemplateCard.js';
-import { MESSAGES, CARD_HEADINGS, CONFIGURATION_TYPES } from '../constants/index.js';
-import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.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';
@@ -13,40 +12,53 @@ const ConfigureTemplate = ({
   mappingDescription,
   triggerDescription
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Box, { css: { width: "100%", paddingTop: "$48" } }, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5", css: { color: "$neutral900" } }, MESSAGES.SELECT_CONFIGURATION_TYPE), /* @__PURE__ */ React__default.createElement(
-    Text,
-    {
-      size: "sm",
-      css: { color: "$neutral600", lineHeight: "$sm", marginTop: "$2" }
-    },
-    MESSAGES.CHOOSE_MAPPING_OR_TRIGGER
-  )), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Flex,
     {
-      css: { maxWidth: 960, width: "100%", marginTop: "$36" },
-      alignItems: "center",
-      justifyContent: "center",
-      gap: "$20"
+      css: {
+        width: "100%",
+        height: "95vh",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center"
+      }
     },
-    /* @__PURE__ */ React__default.createElement(
-      TemplateCard,
+    /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5", css: { color: "$neutral900" } }, INTEGRATION_TEMPLATE_UI_STRINGS.SELECT_CONFIGURATION_TYPE), /* @__PURE__ */ React__default.createElement(
+      Text,
       {
-        icon: /* @__PURE__ */ React__default.createElement(CursorIcon, null),
-        heading: CARD_HEADINGS.TRIGGER,
-        description: triggerDescription,
-        onClickHandler: () => handleConfigurationType(CONFIGURATION_TYPES.TRIGGER)
-      }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      TemplateCard,
+        size: "sm",
+        css: { color: "$neutral600", lineHeight: "$sm", marginTop: "$2" }
+      },
+      INTEGRATION_TEMPLATE_UI_STRINGS.CONFIGURATION_TYPE_DESCRIPTION
+    )),
+    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(
+      Flex,
       {
-        icon: /* @__PURE__ */ React__default.createElement(MappingIcon, null),
-        heading: CARD_HEADINGS.MAPPING,
-        description: mappingDescription,
-        onClickHandler: () => handleConfigurationType(CONFIGURATION_TYPES.MAPPING)
-      }
-    )
-  )));
+        css: { maxWidth: 960, width: "100%", marginTop: "$36" },
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "$20"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        TemplateCard,
+        {
+          icon: /* @__PURE__ */ React__default.createElement(CursorIcon, null),
+          heading: INTEGRATION_TEMPLATE_UI_STRINGS.TRIGGER,
+          description: triggerDescription,
+          onClickHandler: () => handleConfigurationType("TRIGGER")
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        TemplateCard,
+        {
+          icon: /* @__PURE__ */ React__default.createElement(MappingIcon, null),
+          heading: INTEGRATION_TEMPLATE_UI_STRINGS.MAPPING,
+          description: mappingDescription,
+          onClickHandler: () => handleConfigurationType("MAPPING")
+        }
+      )
+    ))
+  );
 };
 
 export { ConfigureTemplate };

package/dist/es/integration-template/components/ConfigureTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigureTemplate.js","sources":["../../../../src/integration-template/components/ConfigureTemplate.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Flex, Heading, Text } from '@sparrowengg/twigs-react';\nimport CursorIcon from '../../commons/icons/cursor';\nimport MappingIcon from '../../commons/icons/mapping';\nimport { TemplateCard } from './TemplateCard';\nimport { ConfigureTemplateProps } from '../types';\nimport { MESSAGES, CARD_HEADINGS, CONFIGURATION_TYPES } from '../constants';\n\n/**\n * ConfigureTemplate component\n * Displays the configuration type selection screen (Mapping vs Trigger)\n */\nexport const ConfigureTemplate: React.FC<ConfigureTemplateProps> = ({\n  handleConfigurationType,\n  mappingDescription,\n  triggerDescription,\n}) => {\n  return (\n    <Box css={{ width: '100%', paddingTop: '$48' }}>\n      <Flex flexDirection=\"column\" alignItems=\"center\">\n        <Heading size=\"h5\" css={{ color: '$neutral900' }}>\n          {MESSAGES.SELECT_CONFIGURATION_TYPE}\n        </Heading>\n        <Text\n          size=\"sm\"\n          css={{ color: '$neutral600', lineHeight: '$sm', marginTop: '$2' }}\n        >\n          {MESSAGES.CHOOSE_MAPPING_OR_TRIGGER}\n        </Text>\n      </Flex>\n      <Flex alignItems=\"center\" justifyContent=\"center\">\n        <Flex\n          css={{ maxWidth: 960, width: '100%', marginTop: '$36' }}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          gap=\"$20\"\n        >\n          <TemplateCard\n            icon={<CursorIcon />}\n            heading={CARD_HEADINGS.TRIGGER}\n            description={triggerDescription}\n            onClickHandler={() => handleConfigurationType(CONFIGURATION_TYPES.TRIGGER)}\n          />\n          <TemplateCard\n            icon={<MappingIcon />}\n            heading={CARD_HEADINGS.MAPPING}\n            description={mappingDescription}\n            onClickHandler={() => handleConfigurationType(CONFIGURATION_TYPES.MAPPING)}\n          />\n        </Flex>\n      </Flex>\n    </Box>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;;;;AAYO,MAAM,oBAAsD,CAAC;AAAA,EAClE,uBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,MAAQ,EAAA,UAAA,EAAY,KAAM,EAAA,EAAA,kBAC1CA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,aAAc,EAAA,QAAA,EAAS,YAAW,QACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAC5C,QAAS,CAAA,yBACZ,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,KAAK,EAAE,KAAA,EAAO,eAAe,UAAY,EAAA,KAAA,EAAO,WAAW,IAAK,EAAA;AAAA,KAAA;AAAA,IAE/D,QAAS,CAAA,yBAAA;AAAA,GAEd,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,UAAW,EAAA,QAAA,EAAS,gBAAe,QACvC,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,KAAK,EAAE,QAAA,EAAU,KAAK,KAAO,EAAA,MAAA,EAAQ,WAAW,KAAM,EAAA;AAAA,MACtD,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,MACf,GAAI,EAAA,KAAA;AAAA,KAAA;AAAA,oBAEJA,cAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAA,+CAAO,UAAW,EAAA,IAAA,CAAA;AAAA,QAClB,SAAS,aAAc,CAAA,OAAA;AAAA,QACvB,WAAa,EAAA,kBAAA;AAAA,QACb,cAAgB,EAAA,MAAM,uBAAwB,CAAA,mBAAA,CAAoB,OAAO,CAAA;AAAA,OAAA;AAAA,KAC3E;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAA,+CAAO,WAAY,EAAA,IAAA,CAAA;AAAA,QACnB,SAAS,aAAc,CAAA,OAAA;AAAA,QACvB,WAAa,EAAA,kBAAA;AAAA,QACb,cAAgB,EAAA,MAAM,uBAAwB,CAAA,mBAAA,CAAoB,OAAO,CAAA;AAAA,OAAA;AAAA,KAC3E;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConfigureTemplate.js","sources":["../../../../src/integration-template/components/ConfigureTemplate.tsx"],"sourcesContent":["import { Flex, Heading, Text } from \"@sparrowengg/twigs-react\";\nimport React from \"react\";\nimport CursorIcon from \"../../commons/icons/cursor\";\nimport MappingIcon from \"../../commons/icons/mapping\";\nimport { ConfigureTemplateProps } from \"../types\";\nimport { INTEGRATION_TEMPLATE_UI_STRINGS } from \"../constants\";\nimport { TemplateCard } from \"./TemplateCard\";\n\nexport const ConfigureTemplate: React.FC<ConfigureTemplateProps> = ({\n  handleConfigurationType,\n  mappingDescription,\n  triggerDescription,\n}) => {\n  return (\n    <Flex\n      css={{\n        width: \"100%\",\n        height: \"95vh\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <Flex flexDirection=\"column\" alignItems=\"center\">\n        <Heading size=\"h5\" css={{ color: \"$neutral900\" }}>\n          {INTEGRATION_TEMPLATE_UI_STRINGS.SELECT_CONFIGURATION_TYPE}\n        </Heading>\n        <Text\n          size=\"sm\"\n          css={{ color: \"$neutral600\", lineHeight: \"$sm\", marginTop: \"$2\" }}\n        >\n          {INTEGRATION_TEMPLATE_UI_STRINGS.CONFIGURATION_TYPE_DESCRIPTION}\n        </Text>\n      </Flex>\n      <Flex alignItems=\"center\" justifyContent=\"center\">\n        <Flex\n          css={{ maxWidth: 960, width: \"100%\", marginTop: \"$36\" }}\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          gap=\"$20\"\n        >\n          <TemplateCard\n            icon={<CursorIcon />}\n            heading={INTEGRATION_TEMPLATE_UI_STRINGS.TRIGGER}\n            description={triggerDescription}\n            onClickHandler={() => handleConfigurationType(\"TRIGGER\")}\n          />\n          <TemplateCard\n            icon={<MappingIcon />}\n            heading={INTEGRATION_TEMPLATE_UI_STRINGS.MAPPING}\n            description={mappingDescription}\n            onClickHandler={() => handleConfigurationType(\"MAPPING\")}\n          />\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;;;AAQO,MAAM,oBAAsD,CAAC;AAAA,EAClE,uBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,MAAA;AAAA,QACR,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,KAAA;AAAA,iDAEC,IAAK,EAAA,EAAA,aAAA,EAAc,QAAS,EAAA,UAAA,EAAW,4BACrCA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,eAC9B,EAAA,EAAA,+BAAA,CAAgC,yBACnC,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,KAAK,EAAE,KAAA,EAAO,eAAe,UAAY,EAAA,KAAA,EAAO,WAAW,IAAK,EAAA;AAAA,OAAA;AAAA,MAE/D,+BAAgC,CAAA,8BAAA;AAAA,KAErC,CAAA;AAAA,oBACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,UAAW,EAAA,QAAA,EAAS,gBAAe,QACvC,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,KAAK,EAAE,QAAA,EAAU,KAAK,KAAO,EAAA,MAAA,EAAQ,WAAW,KAAM,EAAA;AAAA,QACtD,UAAW,EAAA,QAAA;AAAA,QACX,cAAe,EAAA,QAAA;AAAA,QACf,GAAI,EAAA,KAAA;AAAA,OAAA;AAAA,sBAEJA,cAAA,CAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,IAAA,+CAAO,UAAW,EAAA,IAAA,CAAA;AAAA,UAClB,SAAS,+BAAgC,CAAA,OAAA;AAAA,UACzC,WAAa,EAAA,kBAAA;AAAA,UACb,cAAA,EAAgB,MAAM,uBAAA,CAAwB,SAAS,CAAA;AAAA,SAAA;AAAA,OACzD;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,IAAA,+CAAO,WAAY,EAAA,IAAA,CAAA;AAAA,UACnB,SAAS,+BAAgC,CAAA,OAAA;AAAA,UACzC,WAAa,EAAA,kBAAA;AAAA,UACb,cAAA,EAAgB,MAAM,uBAAA,CAAwB,SAAS,CAAA;AAAA,SAAA;AAAA,OACzD;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/es/integration-template/components/TemplateCard.js

@@ -1,5 +1,4 @@
 import React__default from 'react';
-import { TEMPLATE_CARD } from '../constants/index.js';
 import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
 import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
 import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
@@ -18,8 +17,8 @@ const TemplateCard = ({
       alignItems: "center",
       onClick: onClickHandler,
       css: {
-        width: TEMPLATE_CARD.WIDTH,
-        height: TEMPLATE_CARD.HEIGHT,
+        width: 350,
+        height: 300,
         outline: "$borderWidths$xs solid $neutral200",
         borderRadius: "$4xl",
         position: "relative",

package/dist/es/integration-template/components/TemplateCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateCard.js","sources":["../../../../src/integration-template/components/TemplateCard.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Flex, Heading, Text } from '@sparrowengg/twigs-react';\nimport { TemplateCardProps } from '../types';\nimport { TEMPLATE_CARD } from '../constants';\n\n/**\n * TemplateCard component for displaying configuration type options\n * Used in the configuration type selection screen\n */\nexport const TemplateCard: React.FC<TemplateCardProps> = ({\n  icon,\n  heading,\n  description,\n  onClickHandler,\n}) => {\n  return (\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      onClick={onClickHandler}\n      css={{\n        width: TEMPLATE_CARD.WIDTH,\n        height: TEMPLATE_CARD.HEIGHT,\n        outline: '$borderWidths$xs solid $neutral200',\n        borderRadius: '$4xl',\n        position: 'relative',\n        cursor: 'pointer',\n        filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06))',\n        overflow: 'auto',\n        '&:hover': {\n          outline: '$borderWidths$md solid $primary400',\n          '& svg circle, rect, path': {\n            stroke: '$primary500',\n          },\n          '& #ellipse': {\n            opacity: '10%',\n          },\n        },\n      }}\n    >\n      <Box\n        id=\"ellipse\"\n        css={{\n          position: 'absolute',\n          top: '-23%',\n          filter: 'blur(25px)',\n          transition: 'all .4s ease',\n          width: 334,\n          height: '$25',\n          opacity: '0%',\n          background: '$primary400',\n          borderRadius: '50%',\n        }}\n      />\n      <Box css={{ marginBlock: '$32 $16' }}>{icon}</Box>\n      <Heading size=\"h6\" css={{ color: '$neutral900' }}>\n        {heading}\n      </Heading>\n      <Text\n        size=\"md\"\n        css={{\n          marginTop: '$8',\n          color: '$neutral800',\n          width: 222,\n          textAlign: 'center',\n        }}\n      >\n        {description}\n      </Text>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;;AASO,MAAM,eAA4C,CAAC;AAAA,EACxD,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,UAAW,EAAA,QAAA;AAAA,MACX,OAAS,EAAA,cAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,OAAO,aAAc,CAAA,KAAA;AAAA,QACrB,QAAQ,aAAc,CAAA,MAAA;AAAA,QACtB,OAAS,EAAA,oCAAA;AAAA,QACT,YAAc,EAAA,MAAA;AAAA,QACd,QAAU,EAAA,UAAA;AAAA,QACV,MAAQ,EAAA,SAAA;AAAA,QACR,MAAQ,EAAA,4CAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA;AAAA,UACT,OAAS,EAAA,oCAAA;AAAA,UACT,0BAA4B,EAAA;AAAA,YAC1B,MAAQ,EAAA,aAAA;AAAA,WACV;AAAA,UACA,YAAc,EAAA;AAAA,YACZ,OAAS,EAAA,KAAA;AAAA,WACX;AAAA,SACF;AAAA,OACF;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,SAAA;AAAA,QACH,GAAK,EAAA;AAAA,UACH,QAAU,EAAA,UAAA;AAAA,UACV,GAAK,EAAA,MAAA;AAAA,UACL,MAAQ,EAAA,YAAA;AAAA,UACR,UAAY,EAAA,cAAA;AAAA,UACZ,KAAO,EAAA,GAAA;AAAA,UACP,MAAQ,EAAA,KAAA;AAAA,UACR,OAAS,EAAA,IAAA;AAAA,UACT,UAAY,EAAA,aAAA;AAAA,UACZ,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OAAA;AAAA,KACF;AAAA,iDACC,GAAI,EAAA,EAAA,GAAA,EAAK,EAAE,WAAa,EAAA,SAAA,MAAc,IAAK,CAAA;AAAA,oBAC5CA,cAAA,CAAA,aAAA,CAAC,WAAQ,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAC5C,OACH,CAAA;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,GAAK,EAAA;AAAA,UACH,SAAW,EAAA,IAAA;AAAA,UACX,KAAO,EAAA,aAAA;AAAA,UACP,KAAO,EAAA,GAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,SACb;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TemplateCard.js","sources":["../../../../src/integration-template/components/TemplateCard.tsx"],"sourcesContent":["import { Box, Flex, Heading, Text } from \"@sparrowengg/twigs-react\";\nimport React from \"react\";\nimport { TemplateCardProps } from \"../types\";\n\nexport const TemplateCard: React.FC<TemplateCardProps> = ({\n  icon,\n  heading,\n  description,\n  onClickHandler,\n}) => {\n  return (\n    <Flex\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      onClick={onClickHandler}\n      css={{\n        width: 350,\n        height: 300,\n        outline: \"$borderWidths$xs solid $neutral200\",\n        borderRadius: \"$4xl\",\n        position: \"relative\",\n        cursor: \"pointer\",\n        filter: \"drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06))\",\n        overflow: \"auto\",\n        \"&:hover\": {\n          outline: \"$borderWidths$md solid $primary400\",\n          \"& svg circle, rect, path\": {\n            stroke: \"$primary500\",\n          },\n          \"& #ellipse\": {\n            opacity: \"10%\",\n          },\n        },\n      }}\n    >\n      <Box\n        id=\"ellipse\"\n        css={{\n          position: \"absolute\",\n          top: \"-23%\",\n          filter: \"blur(25px)\",\n          transition: \"all .4s ease\",\n          width: 334,\n          height: \"$25\",\n          opacity: \"0%\",\n          background: \"$primary400\",\n          borderRadius: \"50%\",\n        }}\n      />\n      <Box css={{ marginBlock: \"$32 $16\" }}>{icon}</Box>\n      <Heading size=\"h6\" css={{ color: \"$neutral900\" }}>\n        {heading}\n      </Heading>\n      <Text\n        size=\"md\"\n        css={{\n          marginTop: \"$8\",\n          color: \"$neutral800\",\n          width: 222,\n          textAlign: \"center\",\n        }}\n      >\n        {description}\n      </Text>\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":";;;;;;AAIO,MAAM,eAA4C,CAAC;AAAA,EACxD,IAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,UAAW,EAAA,QAAA;AAAA,MACX,OAAS,EAAA,cAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,GAAA;AAAA,QACP,MAAQ,EAAA,GAAA;AAAA,QACR,OAAS,EAAA,oCAAA;AAAA,QACT,YAAc,EAAA,MAAA;AAAA,QACd,QAAU,EAAA,UAAA;AAAA,QACV,MAAQ,EAAA,SAAA;AAAA,QACR,MAAQ,EAAA,4CAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA,QACV,SAAW,EAAA;AAAA,UACT,OAAS,EAAA,oCAAA;AAAA,UACT,0BAA4B,EAAA;AAAA,YAC1B,MAAQ,EAAA,aAAA;AAAA,WACV;AAAA,UACA,YAAc,EAAA;AAAA,YACZ,OAAS,EAAA,KAAA;AAAA,WACX;AAAA,SACF;AAAA,OACF;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAG,EAAA,SAAA;AAAA,QACH,GAAK,EAAA;AAAA,UACH,QAAU,EAAA,UAAA;AAAA,UACV,GAAK,EAAA,MAAA;AAAA,UACL,MAAQ,EAAA,YAAA;AAAA,UACR,UAAY,EAAA,cAAA;AAAA,UACZ,KAAO,EAAA,GAAA;AAAA,UACP,MAAQ,EAAA,KAAA;AAAA,UACR,OAAS,EAAA,IAAA;AAAA,UACT,UAAY,EAAA,aAAA;AAAA,UACZ,YAAc,EAAA,KAAA;AAAA,SAChB;AAAA,OAAA;AAAA,KACF;AAAA,iDACC,GAAI,EAAA,EAAA,GAAA,EAAK,EAAE,WAAa,EAAA,SAAA,MAAc,IAAK,CAAA;AAAA,oBAC5CA,cAAA,CAAA,aAAA,CAAC,WAAQ,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAC5C,OACH,CAAA;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,GAAK,EAAA;AAAA,UACH,SAAW,EAAA,IAAA;AAAA,UACX,KAAO,EAAA,aAAA;AAAA,UACP,KAAO,EAAA,GAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,SACb;AAAA,OAAA;AAAA,MAEC,WAAA;AAAA,KACH;AAAA,GACF,CAAA;AAEJ;;;;"}

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;;;;"}