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

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var React = require('react');
+var cursor = require('../../commons/icons/cursor.js');
+var mapping = require('../../commons/icons/mapping.js');
+var TemplateCard = require('./TemplateCard.js');
+var index = require('../constants/index.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+const ConfigureTemplate = ({
+  handleConfigurationType,
+  mappingDescription,
+  triggerDescription
+}) => {
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%", paddingTop: "$48" } }, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5", css: { color: "$neutral900" } }, index.MESSAGES.SELECT_CONFIGURATION_TYPE), /* @__PURE__ */ React.createElement(
+    text.Text,
+    {
+      size: "sm",
+      css: { color: "$neutral600", lineHeight: "$sm", marginTop: "$2" }
+    },
+    index.MESSAGES.CHOOSE_MAPPING_OR_TRIGGER
+  )), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { maxWidth: 960, width: "100%", marginTop: "$36" },
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "$20"
+    },
+    /* @__PURE__ */ React.createElement(
+      TemplateCard.TemplateCard,
+      {
+        icon: /* @__PURE__ */ React.createElement(cursor.default, null),
+        heading: index.CARD_HEADINGS.TRIGGER,
+        description: triggerDescription,
+        onClickHandler: () => handleConfigurationType(index.CONFIGURATION_TYPES.TRIGGER)
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      TemplateCard.TemplateCard,
+      {
+        icon: /* @__PURE__ */ React.createElement(mapping.default, null),
+        heading: index.CARD_HEADINGS.MAPPING,
+        description: mappingDescription,
+        onClickHandler: () => handleConfigurationType(index.CONFIGURATION_TYPES.MAPPING)
+      }
+    )
+  )));
+};
+
+exports.ConfigureTemplate = ConfigureTemplate;
+//# sourceMappingURL=ConfigureTemplate.js.map

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

@@ -0,0 +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":["Box","Flex","Heading","MESSAGES","Text","TemplateCard","CursorIcon","CARD_HEADINGS","CONFIGURATION_TYPES","MappingIcon"],"mappings":";;;;;;;;;;;;AAYO,MAAM,oBAAsD,CAAC;AAAA,EAClE,uBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,MAAQ,EAAA,UAAA,EAAY,KAAM,EAAA,EAAA,kBAC1C,KAAA,CAAA,aAAA,CAAAC,SAAA,EAAA,EAAK,aAAc,EAAA,QAAA,EAAS,YAAW,QACtC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,eAAQ,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAC5CC,cAAS,CAAA,yBACZ,CACA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;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/DD,cAAS,CAAA,yBAAA;AAAA,GAEd,CACA,kBAAA,KAAA,CAAA,aAAA,CAACF,aAAK,UAAW,EAAA,QAAA,EAAS,gBAAe,QACvC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;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,oBAEJ,KAAA,CAAA,aAAA;AAAA,MAACI,yBAAA;AAAA,MAAA;AAAA,QACC,IAAA,sCAAOC,cAAW,EAAA,IAAA,CAAA;AAAA,QAClB,SAASC,mBAAc,CAAA,OAAA;AAAA,QACvB,WAAa,EAAA,kBAAA;AAAA,QACb,cAAgB,EAAA,MAAM,uBAAwB,CAAAC,yBAAA,CAAoB,OAAO,CAAA;AAAA,OAAA;AAAA,KAC3E;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACH,yBAAA;AAAA,MAAA;AAAA,QACC,IAAA,sCAAOI,eAAY,EAAA,IAAA,CAAA;AAAA,QACnB,SAASF,mBAAc,CAAA,OAAA;AAAA,QACvB,WAAa,EAAA,kBAAA;AAAA,QACb,cAAgB,EAAA,MAAM,uBAAwB,CAAAC,yBAAA,CAAoB,OAAO,CAAA;AAAA,OAAA;AAAA,KAC3E;AAAA,GAEJ,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+var index = require('../constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+const TemplateCard = ({
+  icon,
+  heading: heading$1,
+  description,
+  onClickHandler
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      flexDirection: "column",
+      alignItems: "center",
+      onClick: onClickHandler,
+      css: {
+        width: index.TEMPLATE_CARD.WIDTH,
+        height: index.TEMPLATE_CARD.HEIGHT,
+        outline: "$borderWidths$xs solid $neutral200",
+        borderRadius: "$4xl",
+        position: "relative",
+        cursor: "pointer",
+        filter: "drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06))",
+        overflow: "auto",
+        "&:hover": {
+          outline: "$borderWidths$md solid $primary400",
+          "& svg circle, rect, path": {
+            stroke: "$primary500"
+          },
+          "& #ellipse": {
+            opacity: "10%"
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      box.Box,
+      {
+        id: "ellipse",
+        css: {
+          position: "absolute",
+          top: "-23%",
+          filter: "blur(25px)",
+          transition: "all .4s ease",
+          width: 334,
+          height: "$25",
+          opacity: "0%",
+          background: "$primary400",
+          borderRadius: "50%"
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(box.Box, { css: { marginBlock: "$32 $16" } }, icon),
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6", css: { color: "$neutral900" } }, heading$1),
+    /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "md",
+        css: {
+          marginTop: "$8",
+          color: "$neutral800",
+          width: 222,
+          textAlign: "center"
+        }
+      },
+      description
+    )
+  );
+};
+
+exports.TemplateCard = TemplateCard;
+//# sourceMappingURL=TemplateCard.js.map

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

@@ -0,0 +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":["heading","Flex","TEMPLATE_CARD","Box","Heading","Text"],"mappings":";;;;;;;;;AASO,MAAM,eAA4C,CAAC;AAAA,EACxD,IAAA;AAAA,WACAA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,aAAc,EAAA,QAAA;AAAA,MACd,UAAW,EAAA,QAAA;AAAA,MACX,OAAS,EAAA,cAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,OAAOC,mBAAc,CAAA,KAAA;AAAA,QACrB,QAAQA,mBAAc,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,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,OAAA;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,wCACCA,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,WAAa,EAAA,SAAA,MAAc,IAAK,CAAA;AAAA,oBAC5C,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EAC5CJ,SACH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACK,SAAA;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/cjs/integration-template/components/dashboard/DropdownItem.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var dashboard_constants = require('../../constants/dashboard.constants.js');
+var tooltip = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var dropdown = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/dropdown/dropdown.js');
+var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+const DropdownItem = ({
+  icon,
+  heading,
+  description,
+  onClickHandler,
+  isDisabled,
+  toolTipContent
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
+    {
+      content: isDisabled ? toolTipContent : "",
+      css: {
+        zIndex: "99999999",
+        minWidth: `${dashboard_constants.MAX_DIMENSIONS.TOOLTIP_TEXT_WIDTH}px`,
+        textAlign: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, null, /* @__PURE__ */ React.createElement(
+      dropdown.DropdownMenuItem,
+      {
+        css: { cursor: isDisabled ? "not-allowed !important" : "pointer" },
+        onClick: onClickHandler,
+        disabled: isDisabled
+      },
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "flex-start", gap: "$4" }, /* @__PURE__ */ React.createElement(box.Box, { css: { width: "$6" } }, icon), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md" }, heading), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, description)))
+    ))
+  );
+};
+
+exports.DropdownItem = DropdownItem;
+//# sourceMappingURL=DropdownItem.js.map

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

@@ -0,0 +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":["Tooltip","MAX_DIMENSIONS","Flex","DropdownMenuItem","Box","Text"],"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,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,eAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,aAAa,cAAiB,GAAA,EAAA;AAAA,MACvC,GAAK,EAAA;AAAA,QACH,MAAQ,EAAA,UAAA;AAAA,QACR,QAAA,EAAU,CAAG,EAAAC,kCAAA,CAAe,kBAAkB,CAAA,EAAA,CAAA;AAAA,QAC9C,SAAW,EAAA,QAAA;AAAA,OACb;AAAA,KAAA;AAAA,wCAECC,SACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACC,yBAAA;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,0CAETD,SAAK,EAAA,EAAA,UAAA,EAAW,YAAa,EAAA,GAAA,EAAI,wBAC/B,KAAA,CAAA,aAAA,CAAAE,OAAA,EAAA,EAAI,GAAK,EAAA,EAAE,OAAO,IAAK,EAAA,EAAA,EAAI,IAAK,CAAA,sCAChCF,SAAK,EAAA,EAAA,aAAA,EAAc,QAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACG,aAAK,IAAK,EAAA,IAAA,EAAA,EAAM,OAAQ,CAAA,sCACxBA,SAAK,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/cjs/integration-template/components/dashboard/EventComponent.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var React = require('react');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var box = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+const EventComponent = ({
+  heading,
+  description,
+  hasBorder,
+  hasLink = ""
+}) => {
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, hasBorder && /* @__PURE__ */ React.createElement(box.Box, { css: { paddingInline: "$3" } }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        height: "$3",
+        width: "1px",
+        background: "$neutral200",
+        marginInline: "$4"
+      }
+    }
+  )), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, heading, " :"), !!hasLink ? /* @__PURE__ */ React.createElement(
+    text.Text,
+    {
+      size: "sm",
+      weight: "medium",
+      css: {
+        color: "$primary500",
+        textDecoration: "underline",
+        cursor: "pointer",
+        "&:hover": {
+          color: "$primary600 !important"
+        }
+      },
+      onClick: () => window.open(`${hasLink}`, "_blank")
+    },
+    description
+  ) : /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "medium", css: { color: "$neutral800" } }, description)));
+};
+
+exports.EventComponent = EventComponent;
+//# sourceMappingURL=EventComponent.js.map

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

@@ -0,0 +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":["Flex","Box","Text"],"mappings":";;;;;;;AAOO,MAAM,iBAAgD,CAAC;AAAA,EAC5D,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,EAAA;AACZ,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,SAAK,EAAA,EAAA,UAAA,EAAW,QACd,EAAA,EAAA,SAAA,oBACE,KAAA,CAAA,aAAA,CAAAC,OAAA,EAAA,EAAI,GAAK,EAAA,EAAE,aAAe,EAAA,IAAA,EACzB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,OAAA;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,mBAED,KAAA,CAAA,aAAA,CAAAD,SAAA,EAAA,EAAK,KAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAACE,aAAK,IAAK,EAAA,IAAA,EAAK,KAAK,EAAE,KAAA,EAAO,eAC3B,EAAA,EAAA,OAAA,EAAQ,IACX,CACC,EAAA,CAAC,CAAC,OACD,mBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;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,mBAAA,KAAA,CAAA,aAAA,CAACA,SAAK,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/cjs/integration-template/components/dashboard/MultiAccountFallback.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var dashboard_constants = require('../../constants/dashboard.constants.js');
+var flex = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var heading = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var text = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var button = require('../../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var plus = require('../../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+
+const MultiAccountFallback = ({
+  title,
+  onClickHandler
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      justifyContent: "center",
+      flexDirection: "column",
+      alignItems: "center",
+      css: { paddingTop: 182 }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, dashboard_constants.FALLBACK_MESSAGES.ZERO_ENTRIES_TITLE.replace("{type}", title)),
+    /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        css: {
+          textAlign: "center",
+          maxWidth: 400,
+          marginBlock: "$4 $12",
+          color: "$neutral800"
+        },
+        size: "md"
+      },
+      dashboard_constants.FALLBACK_MESSAGES.CREATE_DESCRIPTION
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
+        variant: "outline",
+        onClick: onClickHandler
+      },
+      `New ${title}`
+    )
+  );
+};
+
+exports.MultiAccountFallback = MultiAccountFallback;
+//# sourceMappingURL=MultiAccountFallback.js.map

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

@@ -0,0 +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":["Flex","Heading","FALLBACK_MESSAGES","Text","Button","PlusIcon"],"mappings":";;;;;;;;;;AASO,MAAM,uBAA4D,CAAC;AAAA,EACxE,KAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;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,oBAEvB,KAAA,CAAA,aAAA,CAACC,mBAAQ,IAAK,EAAA,IAAA,EAAA,EACXC,sCAAkB,kBAAmB,CAAA,OAAA,CAAQ,QAAU,EAAA,KAAK,CAC/D,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;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,MAEJD,qCAAkB,CAAA,kBAAA;AAAA,KACrB;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAACE,aAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,QAAA,sCAAWC,aAAS,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;;;;"}