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

package/dist/es/contact-import/components/TimePicker.js

@@ -1,10 +1,8 @@
-import React__default, { useRef, useState, useEffect, useCallback } from 'react';
-import { LABELS, TIME_HOURS, TIME_MINUTES, TIME_NOON } from '../constants/index.js';
-import useClickOutside from '../hooks/use-click-outside.js';
+import React__default, { useRef, useState, useEffect } from 'react';
 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 { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
 import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -25,120 +23,40 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const hours = [...Array(12).keys()].map((item) => ({ id: item + 1, value: item + 1 }));
+const minutes = [...Array(60).keys()].map((item) => ({
+  id: item,
+  value: (item < 10 ? "0" : "") + item
+}));
+const noon = [
+  { id: 1, value: "am" },
+  { id: 2, value: "pm" }
+];
 const TimePicker = ({
   setOpenTimePicker,
   scheduleTime,
   setScheduleTime
 }) => {
   const timePickerRef = useRef(null);
-  const [timeValue, setTimeValue] = useState({
-    hours: 12,
-    mins: "00",
-    noon: "am"
-  });
-  useEffect(() => {
-    setTimeValue(scheduleTime.time);
-  }, [scheduleTime.time]);
-  useClickOutside(timePickerRef, () => setOpenTimePicker(false));
-  const handleApply = useCallback(() => {
+  const [timeValue, setTimeValue] = useState({ hours: 12, mins: "00", noon: "am" });
+  const handleApply = () => {
     setScheduleTime((prev) => __spreadProps(__spreadValues({}, prev), {
-      time: timeValue
+      time: __spreadValues(__spreadValues({}, prev.time), timeValue)
     }));
     setOpenTimePicker(false);
-  }, [timeValue, setScheduleTime, setOpenTimePicker]);
-  const handleCancel = useCallback(() => {
-    setOpenTimePicker(false);
-  }, [setOpenTimePicker]);
-  const updateHours = useCallback((hours) => {
-    setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { hours }));
-  }, []);
-  const updateMinutes = useCallback((mins) => {
-    setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { mins }));
-  }, []);
-  const updateNoon = useCallback((noon) => {
-    setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { noon }));
-  }, []);
-  const renderHoursList = () => /* @__PURE__ */ React__default.createElement(
-    Box,
-    {
-      css: {
-        overflow: "scroll",
-        padding: "$2 $3",
-        borderRight: "$borderWidths$xs solid $neutral100",
-        cursor: "pointer",
-        "&::-webkit-scrollbar": { display: "none" }
-      }
-    },
-    TIME_HOURS.map((item) => /* @__PURE__ */ React__default.createElement(
-      Text,
-      {
-        size: "md",
-        key: item.id,
-        css: {
-          padding: "$4 $6",
-          background: timeValue.hours === item.value ? "#4A9CA60F" : "none",
-          borderRadius: "$sm",
-          textAlign: "center",
-          color: "$neutral900",
-          "&:hover": {
-            background: "#4A9CA60F"
-          }
-        },
-        onClick: () => updateHours(item.value)
-      },
-      item.value
-    ))
-  );
-  const renderMinutesList = () => /* @__PURE__ */ React__default.createElement(
-    Box,
-    {
-      css: {
-        overflow: "scroll",
-        padding: "$2 $3",
-        borderRight: "$borderWidths$xs solid $neutral100",
-        cursor: "pointer",
-        "&::-webkit-scrollbar": { display: "none" }
-      }
-    },
-    TIME_MINUTES.map((item) => /* @__PURE__ */ React__default.createElement(
-      Text,
-      {
-        size: "md",
-        key: item.id,
-        css: {
-          padding: "$4 $6",
-          background: timeValue.mins === item.value ? "#4A9CA60F" : "none",
-          borderRadius: "$sm",
-          textAlign: "center",
-          color: "$neutral900",
-          "&:hover": {
-            background: "#4A9CA60F"
-          }
-        },
-        onClick: () => updateMinutes(item.value)
-      },
-      item.value
-    ))
-  );
-  const renderNoonSelector = () => /* @__PURE__ */ React__default.createElement(Box, { css: { padding: "$2 $3", cursor: "pointer" } }, TIME_NOON.map((item) => /* @__PURE__ */ React__default.createElement(
-    Text,
-    {
-      size: "md",
-      key: item.id,
-      css: {
-        padding: "$4 $6",
-        background: timeValue.noon === item.value ? "#4A9CA60F" : "none",
-        borderRadius: "$sm",
-        textAlign: "center",
-        color: "$neutral900",
-        "&:hover": {
-          background: "#4A9CA60F"
-        }
-      },
-      onClick: () => updateNoon(item.value)
-    },
-    item.value
-  )));
+  };
+  const handleClickOutside = (event) => {
+    if (timePickerRef.current && !timePickerRef.current.contains(event.target)) {
+      setOpenTimePicker(false);
+    }
+  };
+  useEffect(() => {
+    setTimeValue(scheduleTime.time);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [scheduleTime]);
   return /* @__PURE__ */ React__default.createElement(
     Box,
     {
@@ -150,8 +68,7 @@ const TimePicker = ({
         background: "$white900",
         zIndex: "9",
         padding: "$4 0",
-        position: "absolute",
-        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
+        position: "absolute"
       },
       ref: timePickerRef
     },
@@ -165,32 +82,88 @@ const TimePicker = ({
           borderBottom: "$borderWidths$xs solid $neutral100"
         }
       },
-      renderHoursList(),
-      renderMinutesList(),
-      renderNoonSelector()
+      /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          css: {
+            overflow: "scroll",
+            padding: "$2 $3",
+            borderRight: "$borderWidths$xs solid $neutral100",
+            cursor: "pointer",
+            "&::-webkit-scrollbar": { display: "none" }
+          }
+        },
+        hours.map((item) => /* @__PURE__ */ React__default.createElement(
+          Text,
+          {
+            size: "md",
+            key: item.id,
+            css: {
+              padding: "$4 $6",
+              background: timeValue.hours === item.value ? "#4A9CA60F" : "none",
+              borderRadius: "$sm",
+              textAlign: "center",
+              color: "$neutral900"
+            },
+            onClick: () => setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { hours: item.value }))
+          },
+          item.value
+        ))
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        Box,
+        {
+          css: {
+            overflow: "scroll",
+            padding: "$2 $3",
+            borderRight: "$borderWidths$xs solid $neutral100",
+            cursor: "pointer",
+            "&::-webkit-scrollbar": { display: "none" }
+          }
+        },
+        minutes.map((item) => /* @__PURE__ */ React__default.createElement(
+          Text,
+          {
+            size: "md",
+            key: item.id,
+            css: {
+              padding: "$4 $6",
+              background: timeValue.mins === item.value ? "#4A9CA60F" : "none",
+              borderRadius: "$sm",
+              textAlign: "center",
+              color: "$neutral900"
+            },
+            onClick: () => setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { mins: item.value }))
+          },
+          item.value
+        ))
+      ),
+      /* @__PURE__ */ React__default.createElement(Box, { css: { padding: "$2 $3", cursor: "pointer" } }, noon.map((item) => /* @__PURE__ */ React__default.createElement(
+        Text,
+        {
+          size: "md",
+          key: item.id,
+          css: {
+            padding: "$4 $6",
+            background: timeValue.noon === item.value ? "#4A9CA60F" : "none",
+            borderRadius: "$sm",
+            textAlign: "center",
+            color: "$neutral900"
+          },
+          onClick: () => setTimeValue((prev) => __spreadProps(__spreadValues({}, prev), { noon: item.value }))
+        },
+        item.value
+      )))
     ),
     /* @__PURE__ */ React__default.createElement(
       Flex,
       {
         alignItems: "center",
         justifyContent: "space-between",
-        css: {
-          width: "100%",
-          height: "calc(100% - 172px)",
-          padding: "$2 $6 $2 $6"
-        }
+        css: { width: "100%", height: "calc(100% - 172px)", padding: "$2 $6 $2 $6" }
       },
-      /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          size: "md",
-          variant: "ghost",
-          color: "secondary",
-          onClick: handleCancel
-        },
-        LABELS.CANCEL
-      ),
-      /* @__PURE__ */ React__default.createElement(Button, { size: "md", variant: "ghost", onClick: handleApply }, LABELS.APPLY)
+      /* @__PURE__ */ React__default.createElement(Button, { size: "md", variant: "ghost", color: "secondary", onClick: () => setOpenTimePicker(false) }, "Cancel"),
+      /* @__PURE__ */ React__default.createElement(Button, { size: "md", variant: "ghost", onClick: handleApply }, "Apply")
     )
   );
 };

package/dist/es/contact-import/components/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../../src/contact-import/components/TimePicker.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { Box, Button, Flex, Text } from '@sparrowengg/twigs-react';\nimport { TimePickerProps, TimeValue } from '../types';\nimport { TIME_HOURS, TIME_MINUTES, TIME_NOON, LABELS } from '../constants';\nimport { useClickOutside } from '../hooks';\n\n/**\n * Time picker component for selecting hours, minutes, and AM/PM\n * Supports click outside detection to close the picker\n */\nconst TimePicker: React.FC<TimePickerProps> = ({\n  setOpenTimePicker,\n  scheduleTime,\n  setScheduleTime,\n}) => {\n  const timePickerRef = useRef<HTMLDivElement>(null);\n  const [timeValue, setTimeValue] = useState<TimeValue>({\n    hours: 12,\n    mins: '00',\n    noon: 'am',\n  });\n\n  // Initialize time value from schedule time\n  useEffect(() => {\n    setTimeValue(scheduleTime.time);\n  }, [scheduleTime.time]);\n\n  // Close picker on outside click\n  useClickOutside(timePickerRef, () => setOpenTimePicker(false));\n\n  const handleApply = useCallback(() => {\n    setScheduleTime((prev) => ({\n      ...prev,\n      time: timeValue,\n    }));\n    setOpenTimePicker(false);\n  }, [timeValue, setScheduleTime, setOpenTimePicker]);\n\n  const handleCancel = useCallback(() => {\n    setOpenTimePicker(false);\n  }, [setOpenTimePicker]);\n\n  const updateHours = useCallback((hours: number) => {\n    setTimeValue((prev) => ({ ...prev, hours }));\n  }, []);\n\n  const updateMinutes = useCallback((mins: string) => {\n    setTimeValue((prev) => ({ ...prev, mins }));\n  }, []);\n\n  const updateNoon = useCallback((noon: 'am' | 'pm') => {\n    setTimeValue((prev) => ({ ...prev, noon }));\n  }, []);\n\n  const renderHoursList = () => (\n    <Box\n      css={{\n        overflow: 'scroll',\n        padding: '$2 $3',\n        borderRight: '$borderWidths$xs solid $neutral100',\n        cursor: 'pointer',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {TIME_HOURS.map((item) => (\n        <Text\n          size=\"md\"\n          key={item.id}\n          css={{\n            padding: '$4 $6',\n            background: timeValue.hours === item.value ? '#4A9CA60F' : 'none',\n            borderRadius: '$sm',\n            textAlign: 'center',\n            color: '$neutral900',\n            '&:hover': {\n              background: '#4A9CA60F',\n            },\n          }}\n          onClick={() => updateHours(item.value)}\n        >\n          {item.value}\n        </Text>\n      ))}\n    </Box>\n  );\n\n  const renderMinutesList = () => (\n    <Box\n      css={{\n        overflow: 'scroll',\n        padding: '$2 $3',\n        borderRight: '$borderWidths$xs solid $neutral100',\n        cursor: 'pointer',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {TIME_MINUTES.map((item) => (\n        <Text\n          size=\"md\"\n          key={item.id}\n          css={{\n            padding: '$4 $6',\n            background: timeValue.mins === item.value ? '#4A9CA60F' : 'none',\n            borderRadius: '$sm',\n            textAlign: 'center',\n            color: '$neutral900',\n            '&:hover': {\n              background: '#4A9CA60F',\n            },\n          }}\n          onClick={() => updateMinutes(item.value)}\n        >\n          {item.value}\n        </Text>\n      ))}\n    </Box>\n  );\n\n  const renderNoonSelector = () => (\n    <Box css={{ padding: '$2 $3', cursor: 'pointer' }}>\n      {TIME_NOON.map((item) => (\n        <Text\n          size=\"md\"\n          key={item.id}\n          css={{\n            padding: '$4 $6',\n            background: timeValue.noon === item.value ? '#4A9CA60F' : 'none',\n            borderRadius: '$sm',\n            textAlign: 'center',\n            color: '$neutral900',\n            '&:hover': {\n              background: '#4A9CA60F',\n            },\n          }}\n          onClick={() => updateNoon(item.value)}\n        >\n          {item.value}\n        </Text>\n      ))}\n    </Box>\n  );\n\n  return (\n    <Box\n      css={{\n        width: '180px',\n        height: '228px',\n        border: '$borderWidths$xs solid $neutral200',\n        borderRadius: '10px',\n        background: '$white900',\n        zIndex: '9',\n        padding: '$4 0',\n        position: 'absolute',\n        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',\n      }}\n      ref={timePickerRef}\n    >\n      {/* Time Selection Grid */}\n      <Flex\n        justifyContent=\"space-between\"\n        css={{\n          width: '100%',\n          height: '172px',\n          borderBottom: '$borderWidths$xs solid $neutral100',\n        }}\n      >\n        {renderHoursList()}\n        {renderMinutesList()}\n        {renderNoonSelector()}\n      </Flex>\n\n      {/* Action Buttons */}\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        css={{\n          width: '100%',\n          height: 'calc(100% - 172px)',\n          padding: '$2 $6 $2 $6',\n        }}\n      >\n        <Button\n          size=\"md\"\n          variant=\"ghost\"\n          color=\"secondary\"\n          onClick={handleCancel}\n        >\n          {LABELS.CANCEL}\n        </Button>\n        <Button size=\"md\" variant=\"ghost\" onClick={handleApply}>\n          {LABELS.APPLY}\n        </Button>\n      </Flex>\n    </Box>\n  );\n};\n\nexport default TimePicker;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../../src/contact-import/components/TimePicker.tsx"],"sourcesContent":["import { Box, Button, Flex, Text } from \"@sparrowengg/twigs-react\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\ntype Time = {\n  hours: number;\n  mins: string;\n  noon: \"am\" | \"pm\";\n};\n\ntype TimePickerProps = {\n  setOpenTimePicker: (open: boolean) => void;\n  scheduleTime: { time: Time };\n  setScheduleTime: (schedule: { time: Time }) => void;\n};\n\nconst hours = [...Array(12).keys()].map((item) => ({ id: item + 1, value: item + 1 }));\n\nconst minutes = [...Array(60).keys()].map((item) => ({\n  id: item,\n  value: (item < 10 ? \"0\" : \"\") + item,\n}));\n\nconst noon = [\n  { id: 1, value: \"am\" as const },\n  { id: 2, value: \"pm\" as const },\n];\n\nconst TimePicker: React.FC<TimePickerProps> = ({\n  setOpenTimePicker,\n  scheduleTime,\n  setScheduleTime,\n}) => {\n  const timePickerRef = useRef<HTMLDivElement>(null);\n  const [timeValue, setTimeValue] = useState<Time>({ hours: 12, mins: \"00\", noon: \"am\" });\n\n  const handleApply = () => {\n    setScheduleTime((prev) => ({\n      ...prev,\n      time: { ...prev.time, ...timeValue },\n    }));\n    setOpenTimePicker(false);\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (timePickerRef.current && !timePickerRef.current.contains(event.target as Node)) {\n      setOpenTimePicker(false);\n    }\n  };\n\n  useEffect(() => {\n    setTimeValue(scheduleTime.time);\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [scheduleTime]);\n\n  return (\n    <Box\n      css={{\n        width: \"180px\",\n        height: \"228px\",\n        border: \"$borderWidths$xs solid $neutral200\",\n        borderRadius: \"10px\",\n        background: \"$white900\",\n        zIndex: \"9\",\n        padding: \"$4 0\",\n        position: \"absolute\",\n      }}\n      ref={timePickerRef}\n    >\n      <Flex\n        justifyContent=\"space-between\"\n        css={{\n          width: \"100%\",\n          height: \"172px\",\n          borderBottom: \"$borderWidths$xs solid $neutral100\",\n        }}\n      >\n        <Box\n          css={{\n            overflow: \"scroll\",\n            padding: \"$2 $3\",\n            borderRight: \"$borderWidths$xs solid $neutral100\",\n            cursor: \"pointer\",\n            \"&::-webkit-scrollbar\": { display: \"none\" },\n          }}\n        >\n          {hours.map((item) => (\n            <Text\n              size=\"md\"\n              key={item.id}\n              css={{\n                padding: \"$4 $6\",\n                background: timeValue.hours === item.value ? \"#4A9CA60F\" : \"none\",\n                borderRadius: \"$sm\",\n                textAlign: \"center\",\n                color: \"$neutral900\",\n              }}\n              onClick={() => setTimeValue((prev) => ({ ...prev, hours: item.value }))}\n            >\n              {item.value}\n            </Text>\n          ))}\n        </Box>\n        <Box\n          css={{\n            overflow: \"scroll\",\n            padding: \"$2 $3\",\n            borderRight: \"$borderWidths$xs solid $neutral100\",\n            cursor: \"pointer\",\n            \"&::-webkit-scrollbar\": { display: \"none\" },\n          }}\n        >\n          {minutes.map((item) => (\n            <Text\n              size=\"md\"\n              key={item.id}\n              css={{\n                padding: \"$4 $6\",\n                background: timeValue.mins === item.value ? \"#4A9CA60F\" : \"none\",\n                borderRadius: \"$sm\",\n                textAlign: \"center\",\n                color: \"$neutral900\",\n              }}\n              onClick={() => setTimeValue((prev) => ({ ...prev, mins: item.value }))}\n            >\n              {item.value}\n            </Text>\n          ))}\n        </Box>\n        <Box css={{ padding: \"$2 $3\", cursor: \"pointer\" }}>\n          {noon.map((item) => (\n            <Text\n              size=\"md\"\n              key={item.id}\n              css={{\n                padding: \"$4 $6\",\n                background: timeValue.noon === item.value ? \"#4A9CA60F\" : \"none\",\n                borderRadius: \"$sm\",\n                textAlign: \"center\",\n                color: \"$neutral900\",\n              }}\n              onClick={() => setTimeValue((prev) => ({ ...prev, noon: item.value }))}\n            >\n              {item.value}\n            </Text>\n          ))}\n        </Box>\n      </Flex>\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        css={{ width: \"100%\", height: \"calc(100% - 172px)\", padding: \"$2 $6 $2 $6\" }}\n      >\n        <Button size=\"md\" variant=\"ghost\" color=\"secondary\" onClick={() => setOpenTimePicker(false)}>\n          Cancel\n        </Button>\n        <Button size=\"md\" variant=\"ghost\" onClick={handleApply}>\n          Apply\n        </Button>\n      </Flex>\n    </Box>\n  );\n};\n\nexport default TimePicker;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,QAAQ,CAAC,GAAG,MAAM,EAAE,CAAA,CAAE,MAAM,CAAA,CAAE,IAAI,CAAC,IAAA,MAAU,EAAE,EAAI,EAAA,IAAA,GAAO,GAAG,KAAO,EAAA,IAAA,GAAO,GAAI,CAAA,CAAA,CAAA;AAErF,MAAM,OAAA,GAAU,CAAC,GAAG,KAAM,CAAA,EAAE,CAAE,CAAA,IAAA,EAAM,CAAA,CAAE,GAAI,CAAA,CAAC,IAAU,MAAA;AAAA,EACnD,EAAI,EAAA,IAAA;AAAA,EACJ,KAAQ,EAAA,CAAA,IAAA,GAAO,EAAK,GAAA,GAAA,GAAM,EAAM,IAAA,IAAA;AAClC,CAAE,CAAA,CAAA,CAAA;AAEF,MAAM,IAAO,GAAA;AAAA,EACX,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,IAAc,EAAA;AAAA,EAC9B,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,IAAc,EAAA;AAChC,CAAA,CAAA;AAEA,MAAM,aAAwC,CAAC;AAAA,EAC7C,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,aAAA,GAAgB,OAAuB,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAe,CAAA,EAAE,KAAO,EAAA,EAAA,EAAI,IAAM,EAAA,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,CAAA,CAAA;AAEtF,EAAA,MAAM,cAAc,MAAM;AACxB,IAAgB,eAAA,CAAA,CAAC,IAAU,KAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACtB,IADsB,CAAA,EAAA;AAAA,MAEzB,IAAA,EAAM,cAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAK,IAAS,CAAA,EAAA,SAAA,CAAA;AAAA,KACzB,CAAA,CAAA,CAAA;AACF,IAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,KAAsB,KAAA;AAChD,IAAI,IAAA,aAAA,CAAc,WAAW,CAAC,aAAA,CAAc,QAAQ,QAAS,CAAA,KAAA,CAAM,MAAc,CAAG,EAAA;AAClF,MAAA,iBAAA,CAAkB,KAAK,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,aAAa,IAAI,CAAA,CAAA;AAC9B,IAAS,QAAA,CAAA,gBAAA,CAAiB,aAAa,kBAAkB,CAAA,CAAA;AACzD,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,mBAAA,CAAoB,aAAa,kBAAkB,CAAA,CAAA;AAAA,KAC9D,CAAA;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,KAAO,EAAA,OAAA;AAAA,QACP,MAAQ,EAAA,OAAA;AAAA,QACR,MAAQ,EAAA,oCAAA;AAAA,QACR,YAAc,EAAA,MAAA;AAAA,QACd,UAAY,EAAA,WAAA;AAAA,QACZ,MAAQ,EAAA,GAAA;AAAA,QACR,OAAS,EAAA,MAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,OACZ;AAAA,MACA,GAAK,EAAA,aAAA;AAAA,KAAA;AAAA,oBAELA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,cAAe,EAAA,eAAA;AAAA,QACf,GAAK,EAAA;AAAA,UACH,KAAO,EAAA,MAAA;AAAA,UACP,MAAQ,EAAA,OAAA;AAAA,UACR,YAAc,EAAA,oCAAA;AAAA,SAChB;AAAA,OAAA;AAAA,sBAEAA,cAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,GAAK,EAAA;AAAA,YACH,QAAU,EAAA,QAAA;AAAA,YACV,OAAS,EAAA,OAAA;AAAA,YACT,WAAa,EAAA,oCAAA;AAAA,YACb,MAAQ,EAAA,SAAA;AAAA,YACR,sBAAA,EAAwB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,WAC5C;AAAA,SAAA;AAAA,QAEC,KAAA,CAAM,GAAI,CAAA,CAAC,IACV,qBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,IAAA;AAAA,YACL,KAAK,IAAK,CAAA,EAAA;AAAA,YACV,GAAK,EAAA;AAAA,cACH,OAAS,EAAA,OAAA;AAAA,cACT,UAAY,EAAA,SAAA,CAAU,KAAU,KAAA,IAAA,CAAK,QAAQ,WAAc,GAAA,MAAA;AAAA,cAC3D,YAAc,EAAA,KAAA;AAAA,cACd,SAAW,EAAA,QAAA;AAAA,cACX,KAAO,EAAA,aAAA;AAAA,aACT;AAAA,YACA,OAAA,EAAS,MAAM,YAAA,CAAa,CAAC,IAAA,KAAU,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAL,EAAW,KAAA,EAAO,IAAK,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,WAAA;AAAA,UAErE,IAAK,CAAA,KAAA;AAAA,SAET,CAAA;AAAA,OACH;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,GAAK,EAAA;AAAA,YACH,QAAU,EAAA,QAAA;AAAA,YACV,OAAS,EAAA,OAAA;AAAA,YACT,WAAa,EAAA,oCAAA;AAAA,YACb,MAAQ,EAAA,SAAA;AAAA,YACR,sBAAA,EAAwB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,WAC5C;AAAA,SAAA;AAAA,QAEC,OAAA,CAAQ,GAAI,CAAA,CAAC,IACZ,qBAAAA,cAAA,CAAA,aAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAK,EAAA,IAAA;AAAA,YACL,KAAK,IAAK,CAAA,EAAA;AAAA,YACV,GAAK,EAAA;AAAA,cACH,OAAS,EAAA,OAAA;AAAA,cACT,UAAY,EAAA,SAAA,CAAU,IAAS,KAAA,IAAA,CAAK,QAAQ,WAAc,GAAA,MAAA;AAAA,cAC1D,YAAc,EAAA,KAAA;AAAA,cACd,SAAW,EAAA,QAAA;AAAA,cACX,KAAO,EAAA,aAAA;AAAA,aACT;AAAA,YACA,OAAA,EAAS,MAAM,YAAA,CAAa,CAAC,IAAA,KAAU,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAL,EAAW,IAAA,EAAM,IAAK,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,WAAA;AAAA,UAEpE,IAAK,CAAA,KAAA;AAAA,SAET,CAAA;AAAA,OACH;AAAA,sBACCA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,GAAK,EAAA,EAAE,OAAS,EAAA,OAAA,EAAS,MAAQ,EAAA,SAAA,EACnC,EAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,IACT,qBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,IAAK,EAAA,IAAA;AAAA,UACL,KAAK,IAAK,CAAA,EAAA;AAAA,UACV,GAAK,EAAA;AAAA,YACH,OAAS,EAAA,OAAA;AAAA,YACT,UAAY,EAAA,SAAA,CAAU,IAAS,KAAA,IAAA,CAAK,QAAQ,WAAc,GAAA,MAAA;AAAA,YAC1D,YAAc,EAAA,KAAA;AAAA,YACd,SAAW,EAAA,QAAA;AAAA,YACX,KAAO,EAAA,aAAA;AAAA,WACT;AAAA,UACA,OAAA,EAAS,MAAM,YAAA,CAAa,CAAC,IAAA,KAAU,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,IAAA,CAAA,EAAL,EAAW,IAAA,EAAM,IAAK,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,SAAA;AAAA,QAEpE,IAAK,CAAA,KAAA;AAAA,OAET,CACH,CAAA;AAAA,KACF;AAAA,oBACAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,UAAW,EAAA,QAAA;AAAA,QACX,cAAe,EAAA,eAAA;AAAA,QACf,KAAK,EAAE,KAAA,EAAO,QAAQ,MAAQ,EAAA,oBAAA,EAAsB,SAAS,aAAc,EAAA;AAAA,OAAA;AAAA,sBAE1EA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAO,IAAK,EAAA,IAAA,EAAK,OAAQ,EAAA,OAAA,EAAQ,KAAM,EAAA,WAAA,EAAY,OAAS,EAAA,MAAM,iBAAkB,CAAA,KAAK,KAAG,QAE7F,CAAA;AAAA,sBACAA,cAAA,CAAA,aAAA,CAAC,UAAO,IAAK,EAAA,IAAA,EAAK,SAAQ,OAAQ,EAAA,OAAA,EAAS,eAAa,OAExD,CAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/es/contact-import/components/conact-import-schedule.js

@@ -0,0 +1,60 @@
+import React__default, { useState, useEffect } from 'react';
+import Scheduling from './scheduling.js';
+import { frequent } from '../constants.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 { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { RadioGroup, Radio } from '../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function ImportSchedules({
+  currentList,
+  setCurrentList
+}) {
+  var _a;
+  const [globalStorage, setGlobalStorage] = useState((currentList == null ? void 0 : currentList.frequency) || {
+    frequentMode: frequent.ONETIME.value
+  });
+  useEffect(() => {
+    setCurrentList(__spreadProps(__spreadValues({}, currentList), {
+      frequency: globalStorage
+    }));
+  }, [globalStorage]);
+  return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Text, { css: { color: "$neutral900", fontSize: "$xl" }, weight: "bold" }, "Import Frequency"), /* @__PURE__ */ React__default.createElement(Text, { size: "md", css: { color: "$neutral600", marginTop: "$4" } }, "How frequently do you want to import contacts from Sugar CRM")), /* @__PURE__ */ React__default.createElement(
+    RadioGroup,
+    {
+      defaultValue: (_a = currentList == null ? void 0 : currentList.frequency) == null ? void 0 : _a.frequentMode,
+      onChange: (value) => setGlobalStorage((prevGlobalStorage) => __spreadProps(__spreadValues({}, prevGlobalStorage), {
+        frequentMode: value
+      }))
+    },
+    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$8" }, /* @__PURE__ */ React__default.createElement(Radio, { value: frequent.ONETIME.value, css: { cursor: "pointer" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", css: { color: "$neutral900" } }, frequent.ONETIME.label)), /* @__PURE__ */ React__default.createElement(Radio, { value: frequent.RECURRING.value, css: { cursor: "pointer" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "md", css: { color: "$neutral900" } }, frequent.RECURRING.label)))
+  ), globalStorage.frequentMode === frequent.RECURRING.value && /* @__PURE__ */ React__default.createElement(
+    Scheduling,
+    {
+      globalStorage,
+      setGlobalStorage
+    }
+  ));
+}
+
+export { ImportSchedules as default };
+//# sourceMappingURL=conact-import-schedule.js.map

package/dist/es/contact-import/components/conact-import-schedule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conact-import-schedule.js","sources":["../../../../src/contact-import/components/conact-import-schedule.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { Flex, Box, RadioGroup, Radio, Text } from \"@sparrowengg/twigs-react\";\nimport Scheduling from \"./scheduling\";\nimport { frequent } from \"../constants\";\nimport { GlobalStorage } from \"../types\";\n\n\nexport default function ImportSchedules({\n  currentList, \n  setCurrentList\n}: any) {\n  const [globalStorage, setGlobalStorage] = useState<GlobalStorage>(currentList?.frequency || {\n    frequentMode: frequent.ONETIME.value\n  });\n  useEffect(()=>{\n    setCurrentList({\n      ...currentList,\n      frequency: globalStorage\n    })\n  },[globalStorage])\n  return (\n    <Flex flexDirection=\"column\" gap=\"$8\">\n      <Box>\n        <Text css={{ color: \"$neutral900\", fontSize: \"$xl\" }} weight=\"bold\">\n          Import Frequency\n        </Text>\n        <Text size=\"md\" css={{ color: \"$neutral600\", marginTop: \"$4\" }}>\n          How frequently do you want to import contacts from Sugar CRM\n        </Text>\n      </Box>\n      <RadioGroup\n        defaultValue={currentList?.frequency?.frequentMode}\n        onChange={(value) =>\n          setGlobalStorage((prevGlobalStorage) => ({\n            ...prevGlobalStorage,\n            frequentMode: value as GlobalStorage[\"frequentMode\"],\n          }))\n        }\n      >\n        <Flex alignItems=\"center\" gap=\"$8\">\n          <Radio value={frequent.ONETIME.value} css={{ cursor: \"pointer\" }}>\n            <Text size=\"md\" css={{ color: \"$neutral900\" }}>\n              {frequent.ONETIME.label}\n            </Text>\n          </Radio>\n          <Radio value={frequent.RECURRING.value} css={{ cursor: \"pointer\" }}>\n            <Text size=\"md\" css={{ color: \"$neutral900\" }}>\n              {frequent.RECURRING.label}\n            </Text>\n          </Radio>\n        </Flex>\n      </RadioGroup>\n      {globalStorage.frequentMode === frequent.RECURRING.value && (\n        <Scheduling\n          globalStorage={globalStorage}\n          setGlobalStorage={setGlobalStorage}\n        />\n      )}\n    </Flex>\n  );\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAAwB,eAAgB,CAAA;AAAA,EACtC,WAAA;AAAA,EACA,cAAA;AACF,CAAQ,EAAA;AAVR,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAAA,CAAwB,2CAAa,SAAa,KAAA;AAAA,IAC1F,YAAA,EAAc,SAAS,OAAQ,CAAA,KAAA;AAAA,GAChC,CAAA,CAAA;AACD,EAAA,SAAA,CAAU,MAAI;AACZ,IAAA,cAAA,CAAe,iCACV,WADU,CAAA,EAAA;AAAA,MAEb,SAAW,EAAA,aAAA;AAAA,KACZ,CAAA,CAAA,CAAA;AAAA,GACH,EAAE,CAAC,aAAa,CAAC,CAAA,CAAA;AACjB,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,aAAc,EAAA,QAAA,EAAS,KAAI,IAC/B,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,GACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,QAAK,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAAe,UAAU,KAAM,EAAA,EAAG,MAAO,EAAA,MAAA,EAAA,EAAO,kBAEpE,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,eAAe,SAAW,EAAA,IAAA,EAAQ,EAAA,EAAA,8DAEhE,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAA,CAAc,EAAa,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,SAAA,KAAb,IAAwB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,MACtC,UAAU,CAAC,KAAA,KACT,iBAAiB,CAAC,iBAAA,KAAuB,iCACpC,iBADoC,CAAA,EAAA;AAAA,QAEvC,YAAc,EAAA,KAAA;AAAA,OACd,CAAA,CAAA;AAAA,KAAA;AAAA,oBAGJA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,UAAA,EAAW,QAAS,EAAA,GAAA,EAAI,wBAC3BA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,KAAO,EAAA,QAAA,CAAS,OAAQ,CAAA,KAAA,EAAO,KAAK,EAAE,MAAA,EAAQ,SAAU,EAAA,EAAA,kBAC5DA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,IAAA,EAAK,GAAK,EAAA,EAAE,KAAO,EAAA,aAAA,EAC3B,EAAA,EAAA,QAAA,CAAS,QAAQ,KACpB,CACF,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,KAAA,EAAO,QAAS,CAAA,SAAA,CAAU,KAAO,EAAA,GAAA,EAAK,EAAE,MAAA,EAAQ,SAAU,EAAA,EAAA,+CAC9D,IAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,aAAc,EAAA,EAAA,EACzC,QAAS,CAAA,SAAA,CAAU,KACtB,CACF,CACF,CAAA;AAAA,GAED,EAAA,aAAA,CAAc,YAAiB,KAAA,QAAA,CAAS,UAAU,KACjD,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,gBAAA;AAAA,KAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/contact-import/components/contact-import-configure.js

@@ -0,0 +1,71 @@
+import React__default, { useState } from 'react';
+import ImportSchedules from './conact-import-schedule.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';
+import { RadioGroup, Radio } from '../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js';
+import { Select } from '../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+import { ChevronRightIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.js';
+
+const ContactImportConfigure = ({
+  handleConfigureField,
+  listSegmentOptions,
+  contactImportField
+}) => {
+  var _a, _b;
+  const [currentConfig, setCurrentConfig] = useState("LIST");
+  const [currentList, setCurrentList] = useState(
+    (_b = (_a = contactImportField == null ? void 0 : contactImportField.configure) == null ? void 0 : _a.listSegmentValue) != null ? _b : null
+  );
+  return /* @__PURE__ */ React__default.createElement(Flex, { justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$40", maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5" }, "Import Contacts"), /* @__PURE__ */ React__default.createElement(
+    RadioGroup,
+    {
+      defaultValue: currentConfig,
+      onChange: (value) => {
+        setCurrentConfig(value);
+        setCurrentList(null);
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        css: { marginTop: "$12", "& label": { color: "$neutral800" } },
+        alignItems: "center",
+        gap: "$12"
+      },
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: "LIST", css: { cursor: "pointer" } }, "Import from (List/Segment)"),
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: "ALL", css: { cursor: "pointer" } }, "Import All Contacts")
+    )
+  ), currentConfig === "LIST" ? /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      css: { marginTop: "$12" },
+      onChange: (value) => setCurrentList(value),
+      size: "lg",
+      placeholder: "Choose (List/Segment)",
+      options: listSegmentOptions,
+      value: currentList
+    }
+  ) : null, /* @__PURE__ */ React__default.createElement(Box, { css: {
+    marginBlock: "$16"
+  } }, /* @__PURE__ */ React__default.createElement(ImportSchedules, { currentList, setCurrentList })), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      css: { marginTop: "$16" },
+      disabled: !(currentList == null ? void 0 : currentList.value) && currentConfig !== "ALL",
+      size: "lg",
+      onClick: () => {
+        handleConfigureField({
+          type: currentConfig,
+          listSegmentValue: currentList
+        });
+      },
+      rightIcon: /* @__PURE__ */ React__default.createElement(ChevronRightIcon, null)
+    },
+    "Next, Mapping"
+  )));
+};
+
+export { ContactImportConfigure as default };
+//# sourceMappingURL=contact-import-configure.js.map

package/dist/es/contact-import/components/contact-import-configure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-import-configure.js","sources":["../../../../src/contact-import/components/contact-import-configure.tsx"],"sourcesContent":["import {\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 React, { useState } from \"react\";\nimport ImportSchedules from \"./conact-import-schedule\";\nimport { ContactImportConfigureProps } from \"../types\";\nimport { SelectOption } from \"../../commons/types/enhanced\";\n\nconst ContactImportConfigure = ({\n  handleConfigureField,\n  listSegmentOptions,\n  contactImportField,\n}: ContactImportConfigureProps) => {\n  const [currentConfig, setCurrentConfig] = useState(\"LIST\");\n  const [currentList, setCurrentList] = useState(\n    contactImportField?.configure?.listSegmentValue ?? null\n  );\n\n  return (\n    <Flex justifyContent=\"center\">\n      <Box css={{ marginTop: \"$40\", maxWidth: 488, width: \"100%\" }}>\n        <Heading size=\"h5\">Import Contacts</Heading>\n        <RadioGroup\n          defaultValue={currentConfig}\n          onChange={(value) => {\n            setCurrentConfig(value);\n            setCurrentList(null);\n          }}\n        >\n          <Flex\n            css={{ marginTop: \"$12\", \"& label\": { color: \"$neutral800\" } }}\n            alignItems=\"center\"\n            gap=\"$12\"\n          >\n            <Radio size=\"md\" value=\"LIST\" css={{ cursor: \"pointer\" }}>\n              Import from (List/Segment)\n            </Radio>\n            <Radio size=\"md\" value=\"ALL\" css={{ cursor: \"pointer\" }}>\n              Import All Contacts\n            </Radio>\n          </Flex>\n        </RadioGroup>\n        {currentConfig === \"LIST\" ? (\n          <Select\n            css={{ marginTop: \"$12\" }}\n            onChange={(value: any) => setCurrentList(value)}\n            size=\"lg\"\n            placeholder=\"Choose (List/Segment)\"\n            options={listSegmentOptions}\n            value={currentList}\n          />\n        ) : null}\n        <Box css={{\n          marginBlock: \"$16\"\n        }}>\n        <ImportSchedules currentList={currentList} setCurrentList={setCurrentList}  />\n        </Box>\n        <Button\n          css={{ marginTop: \"$16\" }}\n          disabled={!currentList?.value && currentConfig !== \"ALL\"}\n          size=\"lg\"\n          onClick={() => {\n            handleConfigureField({\n              type: currentConfig,\n              listSegmentValue: currentList,\n            });\n          }}\n          rightIcon={<ChevronRightIcon />}\n        >\n          Next, Mapping\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\nexport default ContactImportConfigure;\n"],"names":["React"],"mappings":"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"}