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

package/dist/cjs/_virtual/index8.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var reactIs = {exports: {}};
+var cjs = {};
 
-exports.__module = reactIs;
+exports.__exports = cjs;
 //# sourceMappingURL=index8.js.map

package/dist/cjs/_virtual/index9.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var cjs = {};
+var reactIs = {exports: {}};
 
-exports.__exports = cjs;
+exports.__module = reactIs;
 //# sourceMappingURL=index9.js.map

package/dist/cjs/cascader-dropdown/popover/popover.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('../../node_modules/@radix-ui/react-popover/dist/index.js');
+var slitches_config = require('../../packages/frontend-templates/slitches.config.js');
+
+const slideUpAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideRightAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const slideDownAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+const slideLeftAndFade = slitches_config.keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+const PopoverContent = slitches_config.styled(index.Content, {
+  padding: "$4",
+  width: 260,
+  zIndex: 100,
+  borderRadius: "$md",
+  backgroundColor: "$white900",
+  animationDuration: "400ms",
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: slideDownAndFade },
+    '&[data-side="right"]': { animationName: slideLeftAndFade },
+    '&[data-side="bottom"]': { animationName: slideUpAndFade },
+    '&[data-side="left"]': { animationName: slideRightAndFade }
+  }
+});
+slitches_config.styled(index.Arrow, {
+  fill: "white"
+});
+slitches_config.styled(index.Close, {
+  all: "unset",
+  fontFamily: "inherit",
+  position: "absolute",
+  top: 5,
+  right: 5
+});
+const { PopoverTrigger } = index;
+const Popover = index.Root;
+
+exports.Popover = Popover;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+//# sourceMappingURL=popover.js.map

package/dist/cjs/cascader-dropdown/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/cascader-dropdown/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { keyframes, styled } from '../../../slitches.config';\n\nconst slideUpAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideRightAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(-2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nconst slideDownAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateY(-2px)' },\n  '100%': { opacity: 1, transform: 'translateY(0)' }\n});\n\nconst slideLeftAndFade = keyframes({\n  '0%': { opacity: 0, transform: 'translateX(2px)' },\n  '100%': { opacity: 1, transform: 'translateX(0)' }\n});\n\nexport const PopoverContent = styled(PopoverPrimitive.Content, {\n  padding: '$4',\n  width: 260,\n  zIndex: 100,\n  borderRadius: '$md',\n  backgroundColor: '$white900',\n  animationDuration: '400ms',\n  boxShadow:\n    'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',\n  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n  willChange: 'transform, opacity',\n  '&[data-state=\"open\"]': {\n    '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n    '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n    '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n    '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n  }\n});\n\nexport const PopoverArrow = styled(PopoverPrimitive.Arrow, {\n  fill: 'white'\n});\n\nexport const PopoverClose = styled(PopoverPrimitive.Close, {\n  all: 'unset',\n  fontFamily: 'inherit',\n  position: 'absolute',\n  top: 5,\n  right: 5\n});\n\nexport const { PopoverTrigger } = PopoverPrimitive;\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverPortal = PopoverPrimitive.Portal;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n"],"names":["keyframes","styled","PopoverPrimitive.Content","PopoverPrimitive.Arrow","PopoverPrimitive.Close","PopoverPrimitive","PopoverPrimitive.Root"],"mappings":";;;;;AAGA,MAAM,iBAAiBA,yBAAU,CAAA;AAAA,EAC/B,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,oBAAoBA,yBAAU,CAAA;AAAA,EAClC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmBA,yBAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,kBAAmB,EAAA;AAAA,EAClD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAED,MAAM,mBAAmBA,yBAAU,CAAA;AAAA,EACjC,IAAM,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,iBAAkB,EAAA;AAAA,EACjD,MAAQ,EAAA,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,eAAgB,EAAA;AACnD,CAAC,CAAA,CAAA;AAEY,MAAA,cAAA,GAAiBC,sBAAO,CAAAC,aAA0B,EAAA;AAAA,EAC7D,OAAS,EAAA,IAAA;AAAA,EACT,KAAO,EAAA,GAAA;AAAA,EACP,MAAQ,EAAA,GAAA;AAAA,EACR,YAAc,EAAA,KAAA;AAAA,EACd,eAAiB,EAAA,WAAA;AAAA,EACjB,iBAAmB,EAAA,OAAA;AAAA,EACnB,SACE,EAAA,sFAAA;AAAA,EACF,uBAAyB,EAAA,+BAAA;AAAA,EACzB,UAAY,EAAA,oBAAA;AAAA,EACZ,sBAAwB,EAAA;AAAA,IACtB,oBAAA,EAAsB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IACxD,sBAAA,EAAwB,EAAE,aAAA,EAAe,gBAAiB,EAAA;AAAA,IAC1D,uBAAA,EAAyB,EAAE,aAAA,EAAe,cAAe,EAAA;AAAA,IACzD,qBAAA,EAAuB,EAAE,aAAA,EAAe,iBAAkB,EAAA;AAAA,GAC5D;AACF,CAAC,EAAA;AAE2BD,sBAAO,CAAAE,WAAwB,EAAA;AAAA,EACzD,IAAM,EAAA,OAAA;AACR,CAAC,EAAA;AAE2BF,sBAAO,CAAAG,WAAwB,EAAA;AAAA,EACzD,GAAK,EAAA,OAAA;AAAA,EACL,UAAY,EAAA,SAAA;AAAA,EACZ,QAAU,EAAA,UAAA;AAAA,EACV,GAAK,EAAA,CAAA;AAAA,EACL,KAAO,EAAA,CAAA;AACT,CAAC,EAAA;AAEY,MAAA,EAAE,gBAAmB,GAAAC,MAAA;AAC3B,MAAM,UAAUC;;;;;;"}

package/dist/cjs/commons/constants/strings.js

@@ -0,0 +1,146 @@
+'use strict';
+
+const COMPONENT_DISPLAY_NAMES = {
+  CONFIRMATION_MODAL: "ConfirmationModal",
+  CUSTOM_PILL: "CustomPill",
+  DRAFT_MODAL: "DraftModal",
+  EDIT_CONFIRMATION: "EditConfirmation",
+  IMPORT_MODAL: "ImportModal",
+  NAMING_MODAL: "NamingModal",
+  SPINNER: "Spinner",
+  THEME_WRAPPER: "ThemeWrapper",
+  ARROW_ICON: "ArrowIcon",
+  CURSOR_ICON: "CursorIcon",
+  EMAIL_LETTER_ICON: "EmailLetterIcon",
+  SMS_ICON: "SMSIcon",
+  WHATSAPP_ICON: "WhatsAppIcon",
+  TRASH_ICON: "TrashIcon",
+  SYNC_ICON: "SyncIcon",
+  MAPPING_ICON: "MappingIcon",
+  NESTED_ADD_ICON: "NestedAddIcon"
+};
+const BUTTON_TEXT = {
+  CONFIRM: "Confirm",
+  CANCEL: "Cancel",
+  SAVE: "Save",
+  YES_PROCEED: "Yes, Proceed",
+  SAVE_MAPPING: "Save Mapping",
+  UPDATE_MAPPING: "Update Mapping"
+};
+const MODAL_TITLES = {
+  YOU_WILL_BE_REDIRECTED: "You will be redirected",
+  NEW_CUSTOM_PROPERTY: "New Custom Property",
+  MAPPING_NAME: "Mapping Name"
+};
+const MODAL_DESCRIPTIONS = {
+  DRAFT_REDIRECT: "To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft"
+};
+const FORM_LABELS = {
+  PROPERTY_NAME: "Property Name"
+};
+const PLACEHOLDERS = {
+  ENTER_NAME_FOR_FUTURE_REFERENCE: "Enter a name for future reference",
+  PLEASE_ENTER_YOUR_QUESTION: "Please enter your question"
+};
+const ARIA_LABELS = {
+  CLOSE_MODAL: "Close modal",
+  REMOVE_PILL: "Remove pill",
+  LOADING: "Loading...",
+  ARROW: "Arrow",
+  CURSOR: "Cursor",
+  EMAIL: "Email",
+  SMS: "SMS",
+  WHATSAPP: "WhatsApp",
+  DELETE: "Delete",
+  SYNC: "Sync",
+  MAPPING: "Mapping",
+  ADD_NESTED_ITEM: "Add nested item"
+};
+const CSS_CLASS_NAMES = {
+  DM_SANS: "dm-sans"
+};
+const FONT_FAMILIES = {
+  DM_SANS: "DM Sans",
+  ROBOTO_MONO: "Roboto Mono",
+  DM_SANS_ROBOTO_MONO_SANS_SERIF: "DM Sans, Roboto Mono, sans-serif",
+  DM_SANS_IMPORTANT: "DM Sans !important"
+};
+const COLORS = {
+  BLACK: "black",
+  ICON_GRAY: "#6A6A6A",
+  ICON_GRAY_DARK: "#64748B",
+  ICON_GRAY_MEDIUM: "#767676",
+  DEFAULT: "default",
+  ERROR: "error",
+  SECONDARY: "secondary",
+  PRIMARY: "primary"
+};
+const SIZE_VALUES = {
+  LARGE: "lg",
+  MEDIUM: "md",
+  SMALL: "sm"
+};
+const VARIANTS = {
+  SOLID: "solid",
+  GHOST: "ghost",
+  DEFAULT: "default",
+  SUCCESS: "success"
+};
+const ATTRIBUTES = {
+  STATUS: "status",
+  IMG: "img"
+};
+const BORDER_RADIUS = {
+  EIGHT_PX: "8px",
+  NINETY_NINE_PX: "99px"
+};
+const NUMERIC_CONSTANTS = {
+  CLOSE_ICON_SIZE: 12,
+  MAX_LENGTH_DEFAULT: 50,
+  MIN_WIDTH_464PX: "464px",
+  BUTTON_WIDTH_106PX: "106px"
+};
+const CONSOLE_MESSAGES = {
+  ERROR_DURING_CONFIRMATION: "Error during confirmation:",
+  UNKNOWN_MAPPING_TYPE: (mappingType) => `Unknown mapping type: ${mappingType}`,
+  FAILED_TO_SAVE_TO_LOCALSTORAGE: "Failed to save to localStorage:",
+  FAILED_TO_REMOVE_FROM_LOCALSTORAGE: "Failed to remove from localStorage:"
+};
+const HELPER_STRINGS = {
+  MAPPING_TYPES: {
+    QUESTION: "QUESTION",
+    CONTACT: "CONTACT",
+    VARIABLE: "VARIABLE",
+    EXPRESSION: "EXPRESSION",
+    SUBMISSION_PROPERTY: "SUBMISSION_PROPERTY"
+  },
+  SURVEY_TYPES: {
+    CLASSIC_FORM: "classicform"
+  },
+  EXCLUDED_QUESTION_TYPES: ["Message", "PaymentQuestion"],
+  EXCLUDED_CONTACT_PROPERTIES: ["team_internal", "department_internal"],
+  LABEL_PREFIX: "- ",
+  ID_PREFIX: "id-",
+  CONSOLE_MESSAGES: {
+    UNKNOWN_MAPPING_TYPE: (mappingType) => `Unknown mapping type: ${mappingType}`
+  }
+};
+
+exports.ARIA_LABELS = ARIA_LABELS;
+exports.ATTRIBUTES = ATTRIBUTES;
+exports.BORDER_RADIUS = BORDER_RADIUS;
+exports.BUTTON_TEXT = BUTTON_TEXT;
+exports.COLORS = COLORS;
+exports.COMPONENT_DISPLAY_NAMES = COMPONENT_DISPLAY_NAMES;
+exports.CONSOLE_MESSAGES = CONSOLE_MESSAGES;
+exports.CSS_CLASS_NAMES = CSS_CLASS_NAMES;
+exports.FONT_FAMILIES = FONT_FAMILIES;
+exports.FORM_LABELS = FORM_LABELS;
+exports.HELPER_STRINGS = HELPER_STRINGS;
+exports.MODAL_DESCRIPTIONS = MODAL_DESCRIPTIONS;
+exports.MODAL_TITLES = MODAL_TITLES;
+exports.NUMERIC_CONSTANTS = NUMERIC_CONSTANTS;
+exports.PLACEHOLDERS = PLACEHOLDERS;
+exports.SIZE_VALUES = SIZE_VALUES;
+exports.VARIANTS = VARIANTS;
+//# sourceMappingURL=strings.js.map

package/dist/cjs/commons/constants/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","sources":["../../../../src/commons/constants/strings.ts"],"sourcesContent":["/**\n * String Constants for Commons Module\n * \n * This file contains all hardcoded strings used across the commons module.\n * Organized by component/feature for easy reference and maintenance.\n */\n\n// ============================================================================\n// Component Display Names\n// ============================================================================\nexport const COMPONENT_DISPLAY_NAMES = {\n  CONFIRMATION_MODAL: 'ConfirmationModal',\n  CUSTOM_PILL: 'CustomPill',\n  DRAFT_MODAL: 'DraftModal',\n  EDIT_CONFIRMATION: 'EditConfirmation',\n  IMPORT_MODAL: 'ImportModal',\n  NAMING_MODAL: 'NamingModal',\n  SPINNER: 'Spinner',\n  THEME_WRAPPER: 'ThemeWrapper',\n  ARROW_ICON: 'ArrowIcon',\n  CURSOR_ICON: 'CursorIcon',\n  EMAIL_LETTER_ICON: 'EmailLetterIcon',\n  SMS_ICON: 'SMSIcon',\n  WHATSAPP_ICON: 'WhatsAppIcon',\n  TRASH_ICON: 'TrashIcon',\n  SYNC_ICON: 'SyncIcon',\n  MAPPING_ICON: 'MappingIcon',\n  NESTED_ADD_ICON: 'NestedAddIcon',\n} as const;\n\n// ============================================================================\n// Button Text\n// ============================================================================\nexport const BUTTON_TEXT = {\n  CONFIRM: 'Confirm',\n  CANCEL: 'Cancel',\n  SAVE: 'Save',\n  YES_PROCEED: 'Yes, Proceed',\n  SAVE_MAPPING: 'Save Mapping',\n  UPDATE_MAPPING: 'Update Mapping',\n} as const;\n\n// ============================================================================\n// Modal Titles\n// ============================================================================\nexport const MODAL_TITLES = {\n  YOU_WILL_BE_REDIRECTED: 'You will be redirected',\n  NEW_CUSTOM_PROPERTY: 'New Custom Property',\n  MAPPING_NAME: 'Mapping Name',\n} as const;\n\n// ============================================================================\n// Modal Descriptions\n// ============================================================================\nexport const MODAL_DESCRIPTIONS = {\n  DRAFT_REDIRECT: \"To create a new share channel, we'll navigate you to the Share section. Your changes will be saved as a draft\",\n} as const;\n\n// ============================================================================\n// Form Labels\n// ============================================================================\nexport const FORM_LABELS = {\n  PROPERTY_NAME: 'Property Name',\n} as const;\n\n// ============================================================================\n// Placeholders\n// ============================================================================\nexport const PLACEHOLDERS = {\n  ENTER_NAME_FOR_FUTURE_REFERENCE: 'Enter a name for future reference',\n  PLEASE_ENTER_YOUR_QUESTION: 'Please enter your question',\n} as const;\n\n// ============================================================================\n// Aria Labels (Accessibility)\n// ============================================================================\nexport const ARIA_LABELS = {\n  CLOSE_MODAL: 'Close modal',\n  REMOVE_PILL: 'Remove pill',\n  LOADING: 'Loading...',\n  ARROW: 'Arrow',\n  CURSOR: 'Cursor',\n  EMAIL: 'Email',\n  SMS: 'SMS',\n  WHATSAPP: 'WhatsApp',\n  DELETE: 'Delete',\n  SYNC: 'Sync',\n  MAPPING: 'Mapping',\n  ADD_NESTED_ITEM: 'Add nested item',\n} as const;\n\n// ============================================================================\n// CSS Class Names\n// ============================================================================\nexport const CSS_CLASS_NAMES = {\n  DM_SANS: 'dm-sans',\n} as const;\n\n// ============================================================================\n// Font Families\n// ============================================================================\nexport const FONT_FAMILIES = {\n  DM_SANS: 'DM Sans',\n  ROBOTO_MONO: 'Roboto Mono',\n  DM_SANS_ROBOTO_MONO_SANS_SERIF: 'DM Sans, Roboto Mono, sans-serif',\n  DM_SANS_IMPORTANT: 'DM Sans !important',\n} as const;\n\n// ============================================================================\n// Colors (Non-CSS)\n// ============================================================================\nexport const COLORS = {\n  BLACK: 'black',\n  ICON_GRAY: '#6A6A6A',\n  ICON_GRAY_DARK: '#64748B',\n  ICON_GRAY_MEDIUM: '#767676',\n  DEFAULT: 'default',\n  ERROR: 'error',\n  SECONDARY: 'secondary',\n  PRIMARY: 'primary',\n} as const;\n\n// ============================================================================\n// Size Values\n// ============================================================================\nexport const SIZE_VALUES = {\n  LARGE: 'lg',\n  MEDIUM: 'md',\n  SMALL: 'sm',\n} as const;\n\n// ============================================================================\n// Variants\n// ============================================================================\nexport const VARIANTS = {\n  SOLID: 'solid',\n  GHOST: 'ghost',\n  DEFAULT: 'default',\n  SUCCESS: 'success',\n} as const;\n\n// ============================================================================\n// Status/Role Attributes\n// ============================================================================\nexport const ATTRIBUTES = {\n  STATUS: 'status',\n  IMG: 'img',\n} as const;\n\n// ============================================================================\n// Border Radius Values\n// ============================================================================\nexport const BORDER_RADIUS = {\n  EIGHT_PX: '8px',\n  NINETY_NINE_PX: '99px',\n} as const;\n\n// ============================================================================\n// Numeric Constants (for components)\n// ============================================================================\nexport const NUMERIC_CONSTANTS = {\n  CLOSE_ICON_SIZE: 12,\n  MAX_LENGTH_DEFAULT: 50,\n  MIN_WIDTH_464PX: '464px',\n  BUTTON_WIDTH_106PX: '106px',\n} as const;\n\n// ============================================================================\n// Console Messages\n// ============================================================================\nexport const CONSOLE_MESSAGES = {\n  ERROR_DURING_CONFIRMATION: 'Error during confirmation:',\n  UNKNOWN_MAPPING_TYPE: (mappingType: string) => `Unknown mapping type: ${mappingType}`,\n  FAILED_TO_SAVE_TO_LOCALSTORAGE: 'Failed to save to localStorage:',\n  FAILED_TO_REMOVE_FROM_LOCALSTORAGE: 'Failed to remove from localStorage:',\n} as const;\n\n// ============================================================================\n// File Size Units\n// ============================================================================\nexport const FILE_SIZE_UNITS = {\n  BYTES: 'Bytes',\n  KB: 'KB',\n  MB: 'MB',\n  GB: 'GB',\n} as const;\n\n// ============================================================================\n// Sort Directions\n// ============================================================================\nexport const SORT_DIRECTIONS = {\n  ASC: 'asc',\n  DESC: 'desc',\n} as const;\n\n// ============================================================================\n// Date Format Patterns\n// ============================================================================\nexport const DATE_FORMATS = {\n  YYYY_MM_DD: 'YYYY-MM-DD',\n} as const;\n\n// ============================================================================\n// Helper Strings\n// ============================================================================\nexport const HELPER_STRINGS = {\n  MAPPING_TYPES: {\n    QUESTION: 'QUESTION',\n    CONTACT: 'CONTACT',\n    VARIABLE: 'VARIABLE',\n    EXPRESSION: 'EXPRESSION',\n    SUBMISSION_PROPERTY: 'SUBMISSION_PROPERTY',\n  },\n  SURVEY_TYPES: {\n    CLASSIC_FORM: 'classicform',\n  },\n  EXCLUDED_QUESTION_TYPES: ['Message', 'PaymentQuestion'] as const,\n  EXCLUDED_CONTACT_PROPERTIES: ['team_internal', 'department_internal'] as const,\n  LABEL_PREFIX: '- ',\n  ID_PREFIX: 'id-',\n  CONSOLE_MESSAGES: {\n    UNKNOWN_MAPPING_TYPE: (mappingType: string) => `Unknown mapping type: ${mappingType}`,\n  },\n} as const;\n\n// ============================================================================\n// Utils Strings\n// ============================================================================\nexport const UTILS_STRINGS = {\n  ZERO_BYTES: '0 Bytes',\n  EMPTY_STRING: '',\n  TRUE: 'true',\n  FALSE: 'false',\n  COMMA_SPACE: ', ',\n  UNKNOWN_ERROR_OCCURRED: 'An unknown error occurred',\n  SPACE: ' ',\n  DOT: '.',\n} as const;\n\n"],"names":[],"mappings":"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"}

package/dist/cjs/contact-import/components/ContactImportConfigure.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ImportSchedules = require('./ImportSchedules.js');
+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 radio = require('../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+
+const ContactImportConfigure = ({
+  handleConfigureField,
+  listSegmentOptions,
+  contactImportField
+}) => {
+  var _a, _b, _c;
+  const [currentConfig, setCurrentConfig] = React.useState(
+    ((_a = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _a.type) || index.IMPORT_CONFIG_TYPE.LIST
+  );
+  const [currentList, setCurrentList] = React.useState(
+    (_c = (_b = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _b.listSegmentValue) != null ? _c : null
+  );
+  const handleConfigChange = React.useCallback((value) => {
+    setCurrentConfig(value);
+    setCurrentList(null);
+  }, []);
+  const handleListChange = React.useCallback((value) => {
+    setCurrentList(value);
+  }, []);
+  const handleNextClick = React.useCallback(() => {
+    handleConfigureField({
+      type: currentConfig,
+      listSegmentValue: currentList
+    });
+  }, [currentConfig, currentList, handleConfigureField]);
+  const isNextDisabled = currentConfig === index.IMPORT_CONFIG_TYPE.LIST && !(currentList == null ? void 0 : currentList.value);
+  const isListConfig = currentConfig === index.IMPORT_CONFIG_TYPE.LIST;
+  return /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center" }, /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        marginTop: "$40",
+        maxWidth: index.UI_CONSTANTS.CONFIGURE_MAX_WIDTH,
+        width: "100%"
+      }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, index.LABELS.IMPORT_CONTACTS),
+    /* @__PURE__ */ React.createElement(radio.RadioGroup, { defaultValue: currentConfig, onChange: handleConfigChange }, /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: {
+          marginTop: "$12",
+          "& label": { color: "$neutral800" }
+        },
+        alignItems: "center",
+        gap: "$12"
+      },
+      /* @__PURE__ */ React.createElement(
+        radio.Radio,
+        {
+          size: "md",
+          value: index.IMPORT_CONFIG_TYPE.LIST,
+          css: { cursor: "pointer" }
+        },
+        index.LABELS.IMPORT_FROM_LIST_SEGMENT
+      ),
+      /* @__PURE__ */ React.createElement(
+        radio.Radio,
+        {
+          size: "md",
+          value: index.IMPORT_CONFIG_TYPE.ALL,
+          css: { cursor: "pointer" }
+        },
+        index.LABELS.IMPORT_ALL_CONTACTS
+      )
+    )),
+    isListConfig && /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        css: { marginTop: "$12" },
+        onChange: handleListChange,
+        size: "lg",
+        placeholder: index.PLACEHOLDERS.CHOOSE_LIST_SEGMENT,
+        options: listSegmentOptions,
+        value: currentList
+      }
+    ),
+    /* @__PURE__ */ React.createElement(box.Box, { css: { marginBlock: "$16" } }, /* @__PURE__ */ React.createElement(
+      ImportSchedules.default,
+      {
+        currentList,
+        setCurrentList
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        css: { marginTop: "$16" },
+        disabled: isNextDisabled,
+        size: "lg",
+        onClick: handleNextClick,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null)
+      },
+      index.LABELS.NEXT_MAPPING
+    )
+  ));
+};
+
+exports.default = ContactImportConfigure;
+//# sourceMappingURL=ContactImportConfigure.js.map

package/dist/cjs/contact-import/components/ContactImportConfigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportConfigure.js","sources":["../../../../src/contact-import/components/ContactImportConfigure.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react';\nimport {\n  Box,\n  Button,\n  Flex,\n  Heading,\n  Radio,\n  RadioGroup,\n  Select,\n} from '@sparrowengg/twigs-react';\nimport { ChevronRightIcon } from '@sparrowengg/twigs-react-icons';\nimport ImportSchedules from './ImportSchedules';\nimport { ContactImportConfigureProps, SelectOption } from '../types';\nimport { UI_CONSTANTS, LABELS, PLACEHOLDERS, IMPORT_CONFIG_TYPE } from '../constants';\n\n/**\n * Component for configuring contact import settings\n * Handles list/segment selection and scheduling\n */\nconst ContactImportConfigure: React.FC<ContactImportConfigureProps> = ({\n  handleConfigureField,\n  listSegmentOptions,\n  contactImportField,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<string>(\n    contactImportField?.configure?.type || IMPORT_CONFIG_TYPE.LIST\n  );\n  const [currentList, setCurrentList] = useState<SelectOption | null>(\n    contactImportField?.configure?.listSegmentValue ?? null\n  );\n\n  const handleConfigChange = useCallback((value: string) => {\n    setCurrentConfig(value);\n    setCurrentList(null);\n  }, []);\n\n  const handleListChange = useCallback((value: SelectOption) => {\n    setCurrentList(value);\n  }, []);\n\n  const handleNextClick = useCallback(() => {\n    handleConfigureField({\n      type: currentConfig as 'LIST' | 'ALL',\n      listSegmentValue: currentList,\n    });\n  }, [currentConfig, currentList, handleConfigureField]);\n\n  const isNextDisabled = currentConfig === IMPORT_CONFIG_TYPE.LIST && !currentList?.value;\n  const isListConfig = currentConfig === IMPORT_CONFIG_TYPE.LIST;\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box\n        css={{\n          marginTop: '$40',\n          maxWidth: UI_CONSTANTS.CONFIGURE_MAX_WIDTH,\n          width: '100%',\n        }}\n      >\n        {/* Title */}\n        <Heading size=\"h5\">{LABELS.IMPORT_CONTACTS}</Heading>\n\n        {/* Import Type Selection */}\n        <RadioGroup defaultValue={currentConfig} onChange={handleConfigChange}>\n          <Flex\n            css={{\n              marginTop: '$12',\n              '& label': { color: '$neutral800' },\n            }}\n            alignItems=\"center\"\n            gap=\"$12\"\n          >\n            <Radio\n              size=\"md\"\n              value={IMPORT_CONFIG_TYPE.LIST}\n              css={{ cursor: 'pointer' }}\n            >\n              {LABELS.IMPORT_FROM_LIST_SEGMENT}\n            </Radio>\n            <Radio\n              size=\"md\"\n              value={IMPORT_CONFIG_TYPE.ALL}\n              css={{ cursor: 'pointer' }}\n            >\n              {LABELS.IMPORT_ALL_CONTACTS}\n            </Radio>\n          </Flex>\n        </RadioGroup>\n\n        {/* List/Segment Selection */}\n        {isListConfig && (\n          <Select\n            css={{ marginTop: '$12' }}\n            onChange={handleListChange}\n            size=\"lg\"\n            placeholder={PLACEHOLDERS.CHOOSE_LIST_SEGMENT}\n            options={listSegmentOptions}\n            value={currentList}\n          />\n        )}\n\n        {/* Import Schedule Configuration */}\n        <Box css={{ marginBlock: '$16' }}>\n          <ImportSchedules\n            currentList={currentList}\n            setCurrentList={setCurrentList}\n          />\n        </Box>\n\n        {/* Next Button */}\n        <Button\n          css={{ marginTop: '$16' }}\n          disabled={isNextDisabled}\n          size=\"lg\"\n          onClick={handleNextClick}\n          rightIcon={<ChevronRightIcon />}\n        >\n          {LABELS.NEXT_MAPPING}\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default ContactImportConfigure;\n\n"],"names":["useState","IMPORT_CONFIG_TYPE","useCallback","Flex","Box","UI_CONSTANTS","Heading","LABELS","RadioGroup","Radio","Select","PLACEHOLDERS","ImportSchedules","Button","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,yBAAgE,CAAC;AAAA,EACrE,oBAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AACF,CAAM,KAAA;AAvBN,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAwBE,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAA,cAAA;AAAA,IAAA,CAAA,CACxC,EAAoB,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,SAAA,KAApB,IAA+B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,KAAQC,wBAAmB,CAAA,IAAA;AAAA,GAC5D,CAAA;AACA,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAD,cAAA;AAAA,IAAA,CACpC,EAAoB,GAAA,CAAA,EAAA,GAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,CAAA,SAAA,KAApB,IAA+B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAA,KAA/B,IAAmD,GAAA,EAAA,GAAA,IAAA;AAAA,GACrD,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqBE,iBAAY,CAAA,CAAC,KAAkB,KAAA;AACxD,IAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACtB,IAAA,cAAA,CAAe,IAAI,CAAA,CAAA;AAAA,GACrB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmBA,iBAAY,CAAA,CAAC,KAAwB,KAAA;AAC5D,IAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,GACtB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAM,EAAA,aAAA;AAAA,MACN,gBAAkB,EAAA,WAAA;AAAA,KACnB,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,aAAe,EAAA,WAAA,EAAa,oBAAoB,CAAC,CAAA,CAAA;AAErD,EAAA,MAAM,cAAiB,GAAA,aAAA,KAAkBD,wBAAmB,CAAA,IAAA,IAAQ,EAAC,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAClF,EAAM,MAAA,YAAA,GAAe,kBAAkBA,wBAAmB,CAAA,IAAA,CAAA;AAE1D,EACE,uBAAA,KAAA,CAAA,aAAA,CAACE,SAAK,EAAA,EAAA,cAAA,EAAe,QACnB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,SAAW,EAAA,KAAA;AAAA,QACX,UAAUC,kBAAa,CAAA,mBAAA;AAAA,QACvB,KAAO,EAAA,MAAA;AAAA,OACT;AAAA,KAAA;AAAA,oBAGC,KAAA,CAAA,aAAA,CAAAC,eAAA,EAAA,EAAQ,IAAK,EAAA,IAAA,EAAA,EAAMC,aAAO,eAAgB,CAAA;AAAA,oBAG1C,KAAA,CAAA,aAAA,CAAAC,gBAAA,EAAA,EAAW,YAAc,EAAA,aAAA,EAAe,UAAU,kBACjD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACL,SAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA;AAAA,UACH,SAAW,EAAA,KAAA;AAAA,UACX,SAAA,EAAW,EAAE,KAAA,EAAO,aAAc,EAAA;AAAA,SACpC;AAAA,QACA,UAAW,EAAA,QAAA;AAAA,QACX,GAAI,EAAA,KAAA;AAAA,OAAA;AAAA,sBAEJ,KAAA,CAAA,aAAA;AAAA,QAACM,WAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,IAAA;AAAA,UACL,OAAOR,wBAAmB,CAAA,IAAA;AAAA,UAC1B,GAAA,EAAK,EAAE,MAAA,EAAQ,SAAU,EAAA;AAAA,SAAA;AAAA,QAExBM,YAAO,CAAA,wBAAA;AAAA,OACV;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAACE,WAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,IAAA;AAAA,UACL,OAAOR,wBAAmB,CAAA,GAAA;AAAA,UAC1B,GAAA,EAAK,EAAE,MAAA,EAAQ,SAAU,EAAA;AAAA,SAAA;AAAA,QAExBM,YAAO,CAAA,mBAAA;AAAA,OACV;AAAA,KAEJ,CAAA;AAAA,IAGC,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAACG,aAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,EAAE,SAAA,EAAW,KAAM,EAAA;AAAA,QACxB,QAAU,EAAA,gBAAA;AAAA,QACV,IAAK,EAAA,IAAA;AAAA,QACL,aAAaC,kBAAa,CAAA,mBAAA;AAAA,QAC1B,OAAS,EAAA,kBAAA;AAAA,QACT,KAAO,EAAA,WAAA;AAAA,OAAA;AAAA,KACT;AAAA,wCAIDP,OAAI,EAAA,EAAA,GAAA,EAAK,EAAE,WAAA,EAAa,OACvB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAACQ,uBAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,cAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,oBAGA,KAAA,CAAA,aAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,EAAE,SAAA,EAAW,KAAM,EAAA;AAAA,QACxB,QAAU,EAAA,cAAA;AAAA,QACV,IAAK,EAAA,IAAA;AAAA,QACL,OAAS,EAAA,eAAA;AAAA,QACT,SAAA,sCAAYC,6BAAiB,EAAA,IAAA,CAAA;AAAA,OAAA;AAAA,MAE5BP,YAAO,CAAA,YAAA;AAAA,KACV;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/contact-import/components/ContactImportHeader.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var arrow = require('../../commons/icons/arrow.js');
+var ContactImportModal = require('./ContactImportModal.js');
+var index = require('../constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var arrowLeft = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js');
+
+const ContactImportHeader = ({
+  setNewImport,
+  setContactImportField,
+  contactImportField,
+  hasPreviousMapping,
+  previousMappingHandler,
+  onSaveHandler,
+  isContactMappingPage,
+  navigateMappingPage,
+  invitePortal
+}) => {
+  const [showImportModal, setShowImportModal] = React.useState(false);
+  const handleBackClick = () => {
+    setNewImport(false);
+    previousMappingHandler();
+  };
+  const handleNavigateToEventSetup = () => {
+    if (isContactMappingPage) {
+      navigateMappingPage(false);
+    }
+  };
+  const handleContinueClick = () => {
+    setShowImportModal(true);
+  };
+  const handleSaveAndClose = async () => {
+    await onSaveHandler();
+    setNewImport(false);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: handleBackClick,
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg",
+          "aria-label": index.LABELS.GO_BACK
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, index.LABELS.NEW_CONTACT_IMPORT)
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": {
+            background: "transparent !important",
+            fontSize: "$md"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: {
+            color: !isContactMappingPage ? "$neutral900" : "$neutral800"
+          },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: handleNavigateToEventSetup
+        },
+        index.LABELS.EVENT_SETUP
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: {
+            color: isContactMappingPage ? "$neutral900" : "$neutral800"
+          },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          disabled: !isContactMappingPage
+        },
+        index.LABELS.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        onClick: handleContinueClick,
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { visibility: isContactMappingPage ? "visible" : "hidden" }
+      },
+      index.LABELS.CONTINUE
+    )
+  ), showImportModal && /* @__PURE__ */ React.createElement(
+    ContactImportModal.default,
+    {
+      setContactImportField,
+      contactImportField,
+      invitePortal,
+      onSaveHandler: handleSaveAndClose,
+      onCloseHandler: () => setShowImportModal(false)
+    }
+  ));
+};
+
+exports.default = ContactImportHeader;
+//# sourceMappingURL=ContactImportHeader.js.map

package/dist/cjs/contact-import/components/ContactImportHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactImportHeader.js","sources":["../../../../src/contact-import/components/ContactImportHeader.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Flex,\n  Heading,\n  IconButton,\n  Button,\n} from '@sparrowengg/twigs-react';\nimport {\n  ArrowLeftIcon,\n  ChevronRightIcon,\n} from '@sparrowengg/twigs-react-icons';\nimport Arrow from '../../commons/icons/arrow';\nimport ContactImportModal from './ContactImportModal';\nimport { ContactImportHeaderProps } from '../types';\nimport { LABELS } from '../constants';\n\n/**\n * Header component for the Contact Import feature\n * Handles navigation between Event Setup and Mapping pages\n */\nconst ContactImportHeader: React.FC<ContactImportHeaderProps> = ({\n  setNewImport,\n  setContactImportField,\n  contactImportField,\n  hasPreviousMapping,\n  previousMappingHandler,\n  onSaveHandler,\n  isContactMappingPage,\n  navigateMappingPage,\n  invitePortal,\n}) => {\n  const [showImportModal, setShowImportModal] = useState(false);\n\n  const handleBackClick = () => {\n    setNewImport(false);\n    previousMappingHandler();\n  };\n\n  const handleNavigateToEventSetup = () => {\n    if (isContactMappingPage) {\n      navigateMappingPage(false);\n    }\n  };\n\n  const handleContinueClick = () => {\n    setShowImportModal(true);\n  };\n\n  const handleSaveAndClose = async () => {\n    await onSaveHandler();\n    setNewImport(false);\n  };\n\n  return (\n    <>\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        css={{\n          borderBottom: '$borderWidths$xs solid $neutral200',\n          padding: '$8 $12',\n        }}\n      >\n        {/* Back Button and Title */}\n        <Flex\n          gap=\"$6\"\n          alignItems=\"center\"\n          css={{ visibility: hasPreviousMapping ? 'visible' : 'hidden' }}\n        >\n          <IconButton\n            onClick={handleBackClick}\n            color=\"default\"\n            icon={<ArrowLeftIcon />}\n            size=\"lg\"\n            aria-label={LABELS.GO_BACK}\n          />\n          <Heading size=\"h6\">{LABELS.NEW_CONTACT_IMPORT}</Heading>\n        </Flex>\n\n        {/* Navigation Breadcrumb */}\n        <Flex\n          alignItems=\"center\"\n          gap=\"$4\"\n          css={{\n            '& button': {\n              background: 'transparent !important',\n              fontSize: '$md',\n            },\n          }}\n        >\n          <Button\n            css={{\n              color: !isContactMappingPage ? '$neutral900' : '$neutral800',\n            }}\n            color=\"default\"\n            variant=\"ghost\"\n            size=\"md\"\n            onClick={handleNavigateToEventSetup}\n          >\n            {LABELS.EVENT_SETUP}\n          </Button>\n          <Arrow />\n          <Button\n            css={{\n              color: isContactMappingPage ? '$neutral900' : '$neutral800',\n            }}\n            color=\"default\"\n            variant=\"ghost\"\n            size=\"md\"\n            disabled={!isContactMappingPage}\n          >\n            {LABELS.MAPPING}\n          </Button>\n        </Flex>\n\n        {/* Continue Button */}\n        <Button\n          size=\"lg\"\n          onClick={handleContinueClick}\n          rightIcon={<ChevronRightIcon />}\n          css={{ visibility: isContactMappingPage ? 'visible' : 'hidden' }}\n        >\n          {LABELS.CONTINUE}\n        </Button>\n      </Flex>\n\n      {/* Import Configuration Modal */}\n      {showImportModal && (\n        <ContactImportModal\n          setContactImportField={setContactImportField}\n          contactImportField={contactImportField}\n          invitePortal={invitePortal}\n          onSaveHandler={handleSaveAndClose}\n          onCloseHandler={() => setShowImportModal(false)}\n        />\n      )}\n    </>\n  );\n};\n\nexport default ContactImportHeader;\n\n"],"names":["useState","Flex","IconButton","ArrowLeftIcon","LABELS","Heading","Button","Arrow","ChevronRightIcon","ContactImportModal"],"mappings":"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"}