npm - @bikdotai/bik-component-library - Versions diffs - 0.0.807 → 0.0.808-beta.0 - Mend

@bikdotai/bik-component-library 0.0.807 → 0.0.808-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1557) hide show

package/dist/esm/components/ai-modals/ActivateBikAI.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivateBikAI.js","sources":["../../../../src/components/ai-modals/ActivateBikAI.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport Graph from '../../assets/icons/graph.svg';\nimport Sparkle from '../../assets/icons/sparkle.svg';\nimport { Button } from '../button';\nimport { Modal } from '../modals/Modal';\nimport { POD } from '../template-preview/models/WhatsAppTemplate';\nimport { BodyPrimary, TitleLarge, TitleMedium } from '../TypographyStyle';\n\nexport const ActivateBikAi: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n\tsource: POD.CHATBOT \| POD.CRM;\n}> = ({ open, onModalClose, onRightBtnClick, onLeftBtnClick, source }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\theight: '430px',\n\t\t\t\twidth: '464px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tzIndex={40}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t>\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: '180px',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tbackgroundColor: 'rgba(142, 142, 142, 0.2)',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '18px',\n\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<Graph width={100} height={90} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{source === 'CHATBOT' ? (\n\t\t\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t\t\tUnlock higher conversion and ease agent work with BIK.AI\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t\t\tExperience reduced Average Handling Time of your tickets with\n\t\t\t\t\t\t\t\tBik.AI!\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '16px',\n\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleLarge>Activate BIK AI</TitleLarge>\n\t\t\t\t\t\t<Sparkle width={32} height={32} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{source === 'CHATBOT' ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tSync your Shopify Data to Bik.AI to supercharge it with\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tyour store’s data to start personalizing it to your\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">customers!</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tSync your Shopify Data to Bik.AI to supercharge it with{' '}\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tyour store’s data to start responding to customer\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">queries right away!</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t\tpaddingBottom: '24px',\n\t\t\t\t\t\tpaddingLeft: '24px',\n\t\t\t\t\t\tpaddingRight: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Learn More'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Sync Shopify Data'}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["ActivateBikAi","~~_ref","~~open","onModalClose","onRightBtnClick","onLeftBtnClick","source","_jsx","Modal","Object","assign","centralContainerStyles","height","width","borderRadius","zIndex","onClose","closeOnOutsideClick","children","_jsxs","style","backgroundColor","display","justifyContent","alignItems","gap","padding","Graph","TitleMedium","flexDirection","TitleLarge","Sparkle","BodyPrimary","color","paddingBottom","paddingLeft","paddingRight","Button","buttonText","buttonType","size","onClick","COLORS","background","brand"],"mappings":"~~iXASaA~~,~~MAAAA~~,~~EAMRC~~,~~IAAoE~~,~~IAAnEC~~,~~KAAEA~~,~~EAAIC~~,~~aAAEA~~,~~EAAYC~~,~~gBAAEA,EAAeC,eAAEA,EAAcC,OAAEA,GAAQL,EACpE,OACCM,~~EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,OAAQ,QACRC,MAAO,QACPC,aAAc,QAEfC,OAAQ,GACRC,QAASb,EACTc,qBAAmB,GAAA,CAAAC,SAEnBC,EACC,MAAA,CAAAD,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNR,OAAQ,QACRC,MAAO,OACPQ,gBAAiB,2BACjBC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,OACLC,QAAS,SACT,CAAAR,SAAA,CAEDX,kBACCA,EAACoB,EAAM,CAAAd,MAAO,IAAKD,OAAQ,OAE5BL,EACE,MAAA,CAAAW,SACAX,EAACqB,EADU,YAAXtB,kKAaHa,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZK,cAAe,SACfJ,IAAK,OACLC,QAAS,SAGV,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,MACfJ,IAAK,QAGN,CAAAP,SAAA,CAAAX,EAACuB,EAAU,CAAAZ,SAAA,oBACXX,EAACwB,EAAO,CAAClB,MAAO,GAAID,OAAQ,SAI5BO,EACC,MAFU,YAAXb,EAECG,OAAAC,OAAA,CAAAU,MAAO,CACNE,QAAS,OACTO,cAAe,SACfN,eAAgB,SAChBC,WAAY,WACZ,CAAAN,SAAA,CAEDX,EAACyB,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WAEL,CAAAf,SAAA,6DAEdX,EAACyB,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WAAS,CAAAf,SAAA,yDAI5BX,EAACyB,EAAWvB,OAAAC,OAAA,CAACuB,MAAM,WAAkC,CAAAf,SAAA,mBAGtDT,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,SACfN,eAAgB,SAChBC,WAAY,WACZ,CAAAN,SAAA,CAEDC,EAACa,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WACsC,CAAAf,SAAA,CAAA,0DAAA,QAGzDX,EAACyB,iBAAYC,MAAM,WAAS,CAAAf,SAAA,uDAI5BX,EAACyB,EAAWvB,OAAAC,OAAA,CAACuB,MAAM,WAA2C,CAAAf,SAAA,iCAKjEC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,MACfN,eAAgB,WAChBC,WAAY,SACZC,IAAK,OACLS,cAAe,OACfC,YAAa,OACbC,aAAc,SACd,CAAAlB,SAAA,CAEDX,EAAC8B,EACA,CAAAC,WAAY,aACZC,WAAW,OACXC,KAAK,QACLC,QAASpC,IAEVE,EAAC8B,GACAC,WAAY,oBACZE,KAAK,QACLpB,MAAO,CACNC,gBAAiBqB,EAAOC,WAAWC,OAEpCH,QAASrC~~,aAIL~~"}
1	+ {"version":3,"file":"ActivateBikAI.js","sources":["../../../../src/components/ai-modals/ActivateBikAI.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport Graph from '../../assets/icons/graph.svg';\nimport Sparkle from '../../assets/icons/sparkle.svg';\nimport { Button } from '../button';\nimport { Modal } from '../modals/Modal';\nimport { POD } from '../template-preview/models/WhatsAppTemplate';\nimport { BodyPrimary, TitleLarge, TitleMedium } from '../TypographyStyle';\n\nexport const ActivateBikAi: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n\tsource: POD.CHATBOT \| POD.CRM;\n}> = ({ open, onModalClose, onRightBtnClick, onLeftBtnClick, source }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\theight: '430px',\n\t\t\t\twidth: '464px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tzIndex={40}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t>\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\theight: '180px',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tbackgroundColor: 'rgba(142, 142, 142, 0.2)',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '18px',\n\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<Graph width={100} height={90} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{source === 'CHATBOT' ? (\n\t\t\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t\t\tUnlock higher conversion and ease agent work with BIK.AI\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t\t\tExperience reduced Average Handling Time of your tickets with\n\t\t\t\t\t\t\t\tBik.AI!\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '16px',\n\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleLarge>Activate BIK AI</TitleLarge>\n\t\t\t\t\t\t<Sparkle width={32} height={32} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{source === 'CHATBOT' ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tSync your Shopify Data to Bik.AI to supercharge it with\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tyour store’s data to start personalizing it to your\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">customers!</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tSync your Shopify Data to Bik.AI to supercharge it with{' '}\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">\n\t\t\t\t\t\t\t\tyour store’s data to start responding to customer\n\t\t\t\t\t\t\t</BodyPrimary>\n\n\t\t\t\t\t\t\t<BodyPrimary color=\"#888888\">queries right away!</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t\tpaddingBottom: '24px',\n\t\t\t\t\t\tpaddingLeft: '24px',\n\t\t\t\t\t\tpaddingRight: '24px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Learn More'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Sync Shopify Data'}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["ActivateBikAi","open","onModalClose","onRightBtnClick","onLeftBtnClick","source","_jsx","Modal","Object","assign","centralContainerStyles","height","width","borderRadius","zIndex","onClose","closeOnOutsideClick","children","_jsxs","style","backgroundColor","display","justifyContent","alignItems","gap","padding","Graph","TitleMedium","flexDirection","TitleLarge","Sparkle","BodyPrimary","color","paddingBottom","paddingLeft","paddingRight","Button","buttonText","buttonType","size","onClick","COLORS","background","brand"],"mappings":"iXASO,MAAMA,EAMRA,EAAGC,OAAMC,eAAcC,kBAAiBC,iBAAgBC,YAE3DC,EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,OAAQ,QACRC,MAAO,QACPC,aAAc,QAEfC,OAAQ,GACRC,QAASb,EACTc,qBAAmB,GAAA,CAAAC,SAEnBC,EACC,MAAA,CAAAD,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNR,OAAQ,QACRC,MAAO,OACPQ,gBAAiB,2BACjBC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,IAAK,OACLC,QAAS,SACT,CAAAR,SAAA,CAEDX,kBACCA,EAACoB,EAAM,CAAAd,MAAO,IAAKD,OAAQ,OAE5BL,EACE,MAAA,CAAAW,SACAX,EAACqB,EADU,YAAXtB,kKAaHa,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZK,cAAe,SACfJ,IAAK,OACLC,QAAS,SAGV,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,MACfJ,IAAK,QAGN,CAAAP,SAAA,CAAAX,EAACuB,EAAU,CAAAZ,SAAA,oBACXX,EAACwB,EAAO,CAAClB,MAAO,GAAID,OAAQ,SAI5BO,EACC,MAFU,YAAXb,EAECG,OAAAC,OAAA,CAAAU,MAAO,CACNE,QAAS,OACTO,cAAe,SACfN,eAAgB,SAChBC,WAAY,WACZ,CAAAN,SAAA,CAEDX,EAACyB,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WAEL,CAAAf,SAAA,6DAEdX,EAACyB,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WAAS,CAAAf,SAAA,yDAI5BX,EAACyB,EAAWvB,OAAAC,OAAA,CAACuB,MAAM,WAAkC,CAAAf,SAAA,mBAGtDT,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,SACfN,eAAgB,SAChBC,WAAY,WACZ,CAAAN,SAAA,CAEDC,EAACa,EAAYvB,OAAAC,OAAA,CAAAuB,MAAM,WACsC,CAAAf,SAAA,CAAA,0DAAA,QAGzDX,EAACyB,iBAAYC,MAAM,WAAS,CAAAf,SAAA,uDAI5BX,EAACyB,EAAWvB,OAAAC,OAAA,CAACuB,MAAM,WAA2C,CAAAf,SAAA,iCAKjEC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTO,cAAe,MACfN,eAAgB,WAChBC,WAAY,SACZC,IAAK,OACLS,cAAe,OACfC,YAAa,OACbC,aAAc,SACd,CAAAlB,SAAA,CAEDX,EAAC8B,EACA,CAAAC,WAAY,aACZC,WAAW,OACXC,KAAK,QACLC,QAASpC,IAEVE,EAAC8B,GACAC,WAAY,oBACZE,KAAK,QACLpB,MAAO,CACNC,gBAAiBqB,EAAOC,WAAWC,OAEpCH,QAASrC"}

package/dist/esm/components/ai-modals/AiCreditsExhausted.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/alert_triangle.svg.js";import{Button as o}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{ProgressBarComponent as r}from"../progress-bar/ProgressBarComponent.js";import{TitleLarge as l,TitleRegular as c,BodySecondary as d,BodyPrimary as a}from"../TypographyStyle.js";const p=p=>{let{open:g,onModalClose:h,body:x,onRightBtnClick:m,onLeftBtnClick:y}=p;return e(s,Object.assign({open:g,centralContainerStyles:{width:"498px",height:"312px",borderRadius:"12px"},onClose:h,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e(l,{children:"Free AI Credits Exhausted"})})),e("div",{style:{height:"24px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},{children:[e(i,{color:n.content.negative,width:20,height:20}),e("div",{style:{width:"8px"}}),e(c,{children:"0/100"}),e(d,Object.assign({color:n.content.secondary},{children:"Free Credits left"}))]})),e(r,{completed:100,isAnimated:!1,height:16,color:n.content.negative})]})),e("div",{style:{height:"24px"}}),e(a,Object.assign({color:n.content.secondary},{children:x||"Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!"})),e("div",{style:{height:"44px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(o,{buttonText:"Learn More",buttonType:"text",size:"small",onClick:y}),e(o,{buttonText:"Contact Support",size:"small",style:{backgroundColor:n.background.brand},onClick:m})]}))]}))}))};export{p as AiCreditsExhausted};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/alert_triangle.svg.js";import{Button as o}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{ProgressBarComponent as r}from"../progress-bar/ProgressBarComponent.js";import{TitleLarge as l,TitleRegular as c,BodySecondary as d,BodyPrimary as a}from"../TypographyStyle.js";const p=({open:p,onModalClose:g,body:h,onRightBtnClick:x,onLeftBtnClick:m})=>e(s,Object.assign({open:p,centralContainerStyles:{width:"498px",height:"312px",borderRadius:"12px"},onClose:g,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e(l,{children:"Free AI Credits Exhausted"})})),e("div",{style:{height:"24px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},{children:[e(i,{color:n.content.negative,width:20,height:20}),e("div",{style:{width:"8px"}}),e(c,{children:"0/100"}),e(d,Object.assign({color:n.content.secondary},{children:"Free Credits left"}))]})),e(r,{completed:100,isAnimated:!1,height:16,color:n.content.negative})]})),e("div",{style:{height:"24px"}}),e(a,Object.assign({color:n.content.secondary},{children:h||"Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!"})),e("div",{style:{height:"44px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(o,{buttonText:"Learn More",buttonType:"text",size:"small",onClick:m}),e(o,{buttonText:"Contact Support",size:"small",style:{backgroundColor:n.background.brand},onClick:x})]}))]}))}));export{p as AiCreditsExhausted};
 //# sourceMappingURL=AiCreditsExhausted.js.map

package/dist/esm/components/ai-modals/AiCreditsExhausted.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AiCreditsExhausted.js","sources":["../../../../src/components/ai-modals/AiCreditsExhausted.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertTriangle from '../../assets/icons/alert_triangle.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { ProgressBarComponent } from '../progress-bar';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleLarge,\n\tTitleRegular,\n} from '../TypographyStyle';\n\nexport const AiCreditsExhausted: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tbody?: string;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n\n}> = ({ open, onModalClose, body, onRightBtnClick, onLeftBtnClick }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\theight: '312px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleLarge>Free AI Credits Exhausted</TitleLarge>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AlertTriangle\n\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div style={{ width: '8px' }}></div>\n\t\t\t\t\t\t<TitleRegular>0/100</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tFree Credits left\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ProgressBarComponent\n\t\t\t\t\t\tcompleted={100}\n\t\t\t\t\t\tisAnimated={false}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t{body \|\|\n\t\t\t\t\t\t'Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!'}\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '44px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Learn More'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Contact Support'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiCreditsExhausted","~~_ref","~~open","onModalClose","body","onRightBtnClick","onLeftBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","height","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","TitleLarge","gap","alignItems","AlertTriangle","color","COLORS","content","negative","TitleRegular","BodySecondary","secondary","ProgressBarComponent","completed","isAnimated","BodyPrimary","Button","buttonText","buttonType","size","onClick","backgroundColor","background","brand"],"mappings":"~~4aAaaA~~,~~MAAAA~~,~~EAORC~~,~~IAAkE~~,~~IAAjEC~~,~~KAAEA~~,~~EAAIC~~,~~aAAEA~~,~~EAAYC~~,~~KAAEA,EAAIC,gBAAEA,EAAeC,eAAEA,GAAgBL,EAClE,OACCM,~~EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,MAAO,QACPC,OAAQ,QACRC,aAAc,QAEfC,QAASZ,EACTa,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAV,OAAAC,OAAA,CAAAU,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,WAGhB,CAAAL,SAAA,CAAAX,EAAA,MAAAE,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTE,eAAgB,WAChB,CAAAN,SAEDX,EAACkB,EAAU,CAAAP,SAAA,iCAGZX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,SACfG,IAAK,SAGN,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfI,WAAY,SACZD,IAAK,QAGN,CAAAR,SAAA,CAAAX,EAACqB,EACA,CAAAC,MAAOC,EAAOC,QAAQC,SACtBpB,MAAO,GACPC,OAAQ,KAETN,EAAK,MAAA,CAAAa,MAAO,CAAER,MAAO,SACrBL,EAAC0B,EAAiC,CAAAf,SAAA,UAClCX,EAAC2B,EAAazB,OAAAC,OAAA,CAACmB,MAAOC,EAAOC,QAAQI,WAErB,CAAAjB,SAAA,2BAEjBX,EAAC6B,GACAC,UAAW,IACXC,YAAY,EACZzB,OAAQ,GACRgB,MAAOC,EAAOC,QAAQC,eAGxBzB,EAAA,MAAA,CAAKa,MAAO,CAAEP,OAAQ,UAEtBN,EAACgC,EAAW9B,OAAAC,OAAA,CAACmB,MAAOC,EAAOC,QAAQI,WAAS,CAAAjB,SAC1Cd,GACA,qGAGFG,EAAK,MAAA,CAAAa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBG,WAAY,SACZD,IAAK,SACL,CAAAR,SAAA,CAGDX,EAACiC,EACA,CAAAC,WAAY,aACZC,WAAW,OACXC,KAAK,QACLC,QAAStC,IAGVC,EAACiC,GACAC,WAAY,kBACZE,KAAK,QACLvB,MAAO,CACNyB,gBAAiBf,EAAOgB,WAAWC,OAEpCH,QAASvC~~,cAIL~~"}
1	+ {"version":3,"file":"AiCreditsExhausted.js","sources":["../../../../src/components/ai-modals/AiCreditsExhausted.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertTriangle from '../../assets/icons/alert_triangle.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { ProgressBarComponent } from '../progress-bar';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleLarge,\n\tTitleRegular,\n} from '../TypographyStyle';\n\nexport const AiCreditsExhausted: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tbody?: string;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n\n}> = ({ open, onModalClose, body, onRightBtnClick, onLeftBtnClick }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\theight: '312px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleLarge>Free AI Credits Exhausted</TitleLarge>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: '4px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AlertTriangle\n\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div style={{ width: '8px' }}></div>\n\t\t\t\t\t\t<TitleRegular>0/100</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tFree Credits left\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ProgressBarComponent\n\t\t\t\t\t\tcompleted={100}\n\t\t\t\t\t\tisAnimated={false}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t{body \|\|\n\t\t\t\t\t\t'Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!'}\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '44px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Learn More'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Contact Support'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiCreditsExhausted","open","onModalClose","body","onRightBtnClick","onLeftBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","height","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","TitleLarge","gap","alignItems","AlertTriangle","color","COLORS","content","negative","TitleRegular","BodySecondary","secondary","ProgressBarComponent","completed","isAnimated","BodyPrimary","Button","buttonText","buttonType","size","onClick","backgroundColor","background","brand"],"mappings":"4aAaO,MAAMA,EAORA,EAAGC,OAAMC,eAAcC,OAAMC,kBAAiBC,oBAEjDC,EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,MAAO,QACPC,OAAQ,QACRC,aAAc,QAEfC,QAASZ,EACTa,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAV,OAAAC,OAAA,CAAAU,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,WAGhB,CAAAL,SAAA,CAAAX,EAAA,MAAAE,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTE,eAAgB,WAChB,CAAAN,SAEDX,EAACkB,EAAU,CAAAP,SAAA,iCAGZX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,SACfG,IAAK,SAGN,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfI,WAAY,SACZD,IAAK,QAGN,CAAAR,SAAA,CAAAX,EAACqB,EACA,CAAAC,MAAOC,EAAOC,QAAQC,SACtBpB,MAAO,GACPC,OAAQ,KAETN,EAAK,MAAA,CAAAa,MAAO,CAAER,MAAO,SACrBL,EAAC0B,EAAiC,CAAAf,SAAA,UAClCX,EAAC2B,EAAazB,OAAAC,OAAA,CAACmB,MAAOC,EAAOC,QAAQI,WAErB,CAAAjB,SAAA,2BAEjBX,EAAC6B,GACAC,UAAW,IACXC,YAAY,EACZzB,OAAQ,GACRgB,MAAOC,EAAOC,QAAQC,eAGxBzB,EAAA,MAAA,CAAKa,MAAO,CAAEP,OAAQ,UAEtBN,EAACgC,EAAW9B,OAAAC,OAAA,CAACmB,MAAOC,EAAOC,QAAQI,WAAS,CAAAjB,SAC1Cd,GACA,qGAGFG,EAAK,MAAA,CAAAa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBG,WAAY,SACZD,IAAK,SACL,CAAAR,SAAA,CAGDX,EAACiC,EACA,CAAAC,WAAY,aACZC,WAAW,OACXC,KAAK,QACLC,QAAStC,IAGVC,EAACiC,GACAC,WAAY,kBACZE,KAAK,QACLvB,MAAO,CACNyB,gBAAiBf,EAAOgB,WAAWC,OAEpCH,QAASvC"}

package/dist/esm/components/ai-modals/AiCreditsLow.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/alert_triangle.svg.js";import{Button as o}from"../button/Button.js";import{Modal as r}from"../modals/Modal.js";import{TitleLarge as s,BodyPrimary as l}from"../TypographyStyle.js";const d=d=>{let{open:c,onModalClose:a,onLeftBtnClick:p,onRightBtnClick:g}=d;return e(r,Object.assign({open:c,centralContainerStyles:{width:"498px",borderRadius:"12px"},onClose:a,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column",width:"100%"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e("div",Object.assign({style:{backgroundColor:n.background.negative.light,width:"64px",height:"64px",padding:"12px",borderRadius:"40px"}},{children:e(i,{width:40,height:40,color:n.content.negative})}))})),e("div",{style:{height:"32px"}}),e(s,{children:"Your AI Credits are running low"}),e("div",{style:{height:"24px"}}),e(l,Object.assign({color:n.content.secondary},{children:"Recharge your credits now to ensure uninterrupted service."})),e("div",{style:{height:"12px"}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e(l,Object.assign({color:n.content.secondary},{children:"Don’t let the growth stop. Add AI Credits"}))})),e("div",{style:{height:"32px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(o,{buttonText:"Close",buttonType:"text",size:"small",onClick:p}),e(o,{buttonText:"Contact Support",size:"small",style:{backgroundColor:n.background.brand},onClick:g})]}))]}))}))};export{d as AiCreditsLow};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/alert_triangle.svg.js";import{Button as o}from"../button/Button.js";import{Modal as r}from"../modals/Modal.js";import{TitleLarge as s,BodyPrimary as l}from"../TypographyStyle.js";const d=({open:d,onModalClose:c,onLeftBtnClick:a,onRightBtnClick:p})=>e(r,Object.assign({open:d,centralContainerStyles:{width:"498px",borderRadius:"12px"},onClose:c,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column",width:"100%"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e("div",Object.assign({style:{backgroundColor:n.background.negative.light,width:"64px",height:"64px",padding:"12px",borderRadius:"40px"}},{children:e(i,{width:40,height:40,color:n.content.negative})}))})),e("div",{style:{height:"32px"}}),e(s,{children:"Your AI Credits are running low"}),e("div",{style:{height:"24px"}}),e(l,Object.assign({color:n.content.secondary},{children:"Recharge your credits now to ensure uninterrupted service."})),e("div",{style:{height:"12px"}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e(l,Object.assign({color:n.content.secondary},{children:"Don’t let the growth stop. Add AI Credits"}))})),e("div",{style:{height:"32px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(o,{buttonText:"Close",buttonType:"text",size:"small",onClick:a}),e(o,{buttonText:"Contact Support",size:"small",style:{backgroundColor:n.background.brand},onClick:p})]}))]}))}));export{d as AiCreditsLow};
 //# sourceMappingURL=AiCreditsLow.js.map

package/dist/esm/components/ai-modals/AiCreditsLow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AiCreditsLow.js","sources":["../../../../src/components/ai-modals/AiCreditsLow.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertTriangle from '../../assets/icons/alert_triangle.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { BodyPrimary, TitleLarge } from '../TypographyStyle';\n\nexport const AiCreditsLow: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n}> = ({ open, onModalClose, onLeftBtnClick, onRightBtnClick }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.negative.light,\n\t\t\t\t\t\t\twidth: '64px',\n\t\t\t\t\t\t\theight: '64px',\n\t\t\t\t\t\t\tpadding: '12px',\n\t\t\t\t\t\t\tborderRadius: '40px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AlertTriangle\n\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<TitleLarge>Your AI Credits are running low</TitleLarge>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\tRecharge your credits now to ensure uninterrupted service.\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '12px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\tDon’t let the growth stop. Add AI Credits\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Close'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Contact Support'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiCreditsLow","~~_ref","~~open","onModalClose","onLeftBtnClick","onRightBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","backgroundColor","COLORS","background","negative","light","height","AlertTriangle","color","content","TitleLarge","BodyPrimary","secondary","alignItems","gap","Button","buttonText","buttonType","size","onClick","brand"],"mappings":"~~wTAOaA~~,~~MAAAA~~,~~EAKRC~~,~~IAA4D~~,~~IAA3DC~~,~~KAAEA~~,~~EAAIC~~,~~aAAEA~~,~~EAAYC,eAAEA,EAAcC,gBAAEA,GAAiBJ,EAC5D,OACCK,~~EAACC,EAAKC,OAAAC,OAAA,CACLP,KAAMA,EACNQ,uBAAwB,CACvBC,MAAO,QACPC,aAAc,QAEfC,QAASV,EACTW,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAT,OAAAC,OAAA,CAAAS,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,SACfV,MAAO,SAGR,CAAAK,SAAA,CAAAV,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAGjB,CAAAN,SAAAV,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNK,gBAAiBC,EAAOC,WAAWC,SAASC,MAC5ChB,MAAO,OACPiB,OAAQ,OACRT,QAAS,OACTP,aAAc,SACd,CAAAI,SAEDV,EAACuB,EACA,CAAAlB,MAAO,GACPiB,OAAQ,GACRE,MAAON,EAAOO,QAAQL,iBAKzBpB,SAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAC0B,EAAU,CAAAhB,SAAA,oCAEXV,EAAA,MAAA,CAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAC2B,EAAYzB,OAAAC,OAAA,CAAAqB,MAAON,EAAOO,QAAQG,WAAS,CAAAlB,SAAA,gEAI5CV,EAAA,MAAA,CAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAGjB,CAAAN,SAAAV,EAAC2B,EAAWzB,OAAAC,OAAA,CAACqB,MAAON,EAAOO,QAAQG,WAErB,CAAAlB,SAAA,kDAGfV,EAAK,MAAA,CAAAY,MAAO,CAAEU,OAAQ,UAEtBX,EACC,MAAAT,OAAAC,OAAA,CAAAS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBa,WAAY,SACZC,IAAK,SACL,CAAApB,SAAA,CAEDV,EAAC+B,EACA,CAAAC,WAAY,QACZC,WAAW,OACXC,KAAK,QACLC,QAASrC,IAEVE,EAAC+B,GACAC,WAAY,kBACZE,KAAK,QACLtB,MAAO,CACNK,gBAAiBC,EAAOC,WAAWiB,OAEpCD,QAASpC~~,cAIL~~"}
1	+ {"version":3,"file":"AiCreditsLow.js","sources":["../../../../src/components/ai-modals/AiCreditsLow.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport AlertTriangle from '../../assets/icons/alert_triangle.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { BodyPrimary, TitleLarge } from '../TypographyStyle';\n\nexport const AiCreditsLow: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n}> = ({ open, onModalClose, onLeftBtnClick, onRightBtnClick }) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.negative.light,\n\t\t\t\t\t\t\twidth: '64px',\n\t\t\t\t\t\t\theight: '64px',\n\t\t\t\t\t\t\tpadding: '12px',\n\t\t\t\t\t\t\tborderRadius: '40px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AlertTriangle\n\t\t\t\t\t\t\twidth={40}\n\t\t\t\t\t\t\theight={40}\n\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<TitleLarge>Your AI Credits are running low</TitleLarge>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\tRecharge your credits now to ensure uninterrupted service.\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '12px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\tDon’t let the growth stop. Add AI Credits\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Close'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Contact Support'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiCreditsLow","open","onModalClose","onLeftBtnClick","onRightBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","backgroundColor","COLORS","background","negative","light","height","AlertTriangle","color","content","TitleLarge","BodyPrimary","secondary","alignItems","gap","Button","buttonText","buttonType","size","onClick","brand"],"mappings":"wTAOO,MAAMA,EAKRA,EAAGC,OAAMC,eAAcC,iBAAgBC,qBAE1CC,EAACC,EAAKC,OAAAC,OAAA,CACLP,KAAMA,EACNQ,uBAAwB,CACvBC,MAAO,QACPC,aAAc,QAEfC,QAASV,EACTW,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAT,OAAAC,OAAA,CAAAS,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,SACfV,MAAO,SAGR,CAAAK,SAAA,CAAAV,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAGjB,CAAAN,SAAAV,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNK,gBAAiBC,EAAOC,WAAWC,SAASC,MAC5ChB,MAAO,OACPiB,OAAQ,OACRT,QAAS,OACTP,aAAc,SACd,CAAAI,SAEDV,EAACuB,EACA,CAAAlB,MAAO,GACPiB,OAAQ,GACRE,MAAON,EAAOO,QAAQL,iBAKzBpB,SAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAC0B,EAAU,CAAAhB,SAAA,oCAEXV,EAAA,MAAA,CAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAC2B,EAAYzB,OAAAC,OAAA,CAAAqB,MAAON,EAAOO,QAAQG,WAAS,CAAAlB,SAAA,gEAI5CV,EAAA,MAAA,CAAKY,MAAO,CAAEU,OAAQ,UAEtBtB,EAAA,MAAAE,OAAAC,OAAA,CACCS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAGjB,CAAAN,SAAAV,EAAC2B,EAAWzB,OAAAC,OAAA,CAACqB,MAAON,EAAOO,QAAQG,WAErB,CAAAlB,SAAA,kDAGfV,EAAK,MAAA,CAAAY,MAAO,CAAEU,OAAQ,UAEtBX,EACC,MAAAT,OAAAC,OAAA,CAAAS,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBa,WAAY,SACZC,IAAK,SACL,CAAApB,SAAA,CAEDV,EAAC+B,EACA,CAAAC,WAAY,QACZC,WAAW,OACXC,KAAK,QACLC,QAASrC,IAEVE,EAAC+B,GACAC,WAAY,kBACZE,KAAK,QACLtB,MAAO,CACNK,gBAAiBC,EAAOC,WAAWiB,OAEpCD,QAASpC"}

package/dist/esm/components/ai-modals/AiSyncProgress.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import o from"../../assets/icons/sync.svg.js";import{Button as n}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{ProgressBarComponent as l}from"../progress-bar/ProgressBarComponent.js";import{TitleLarge as r,BodyPrimary as c}from"../TypographyStyle.js";const a=a=>{let{open:d,onModalClose:p,completedPercent:m,onLeftBtnClick:h,onRightBtnClick:g}=a;return e(s,Object.assign({open:d,centralContainerStyles:{width:"498px",height:"324px",borderRadius:"12px"},onClose:p,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e(r,{children:"Wait for Sync to complete"})})),e("div",{style:{height:"24px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"12px"}},{children:[e(o,{width:24,height:24}),e(c,Object.assign({color:"#616161"},{children:"Syncing Shopify Store Data..."}))]})),e(l,{completed:m,isAnimated:!1,height:16,color:i.background.positive.vibrant})]})),e("div",{style:{height:"24px"}}),e(c,Object.assign({color:i.content.secondary},{children:"You can start replying with AI after sync is complete. In the meanwhile, learn how to leverage AI for maximum efficiency"})),e("div",{style:{height:"32px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(n,{buttonText:"Close",buttonType:"text",size:"small",onClick:h}),e(n,{buttonText:"Explore Bik.ai",size:"small",style:{backgroundColor:i.background.brand},onClick:g})]}))]}))}))};export{a as AiSyncProgress};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as i}from"../../constants/Theme.js";import o from"../../assets/icons/sync.svg.js";import{Button as n}from"../button/Button.js";import{Modal as s}from"../modals/Modal.js";import{ProgressBarComponent as l}from"../progress-bar/ProgressBarComponent.js";import{TitleLarge as r,BodyPrimary as c}from"../TypographyStyle.js";const a=({open:a,onModalClose:d,completedPercent:p,onLeftBtnClick:m,onRightBtnClick:h})=>e(s,Object.assign({open:a,centralContainerStyles:{width:"498px",height:"324px",borderRadius:"12px"},onClose:d,closeOnOutsideClick:!0,zIndex:40},{children:t("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e(r,{children:"Wait for Sync to complete"})})),e("div",{style:{height:"24px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"12px"}},{children:[e(o,{width:24,height:24}),e(c,Object.assign({color:"#616161"},{children:"Syncing Shopify Store Data..."}))]})),e(l,{completed:p,isAnimated:!1,height:16,color:i.background.positive.vibrant})]})),e("div",{style:{height:"24px"}}),e(c,Object.assign({color:i.content.secondary},{children:"You can start replying with AI after sync is complete. In the meanwhile, learn how to leverage AI for maximum efficiency"})),e("div",{style:{height:"32px"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e(n,{buttonText:"Close",buttonType:"text",size:"small",onClick:m}),e(n,{buttonText:"Explore Bik.ai",size:"small",style:{backgroundColor:i.background.brand},onClick:h})]}))]}))}));export{a as AiSyncProgress};
 //# sourceMappingURL=AiSyncProgress.js.map

package/dist/esm/components/ai-modals/AiSyncProgress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AiSyncProgress.js","sources":["../../../../src/components/ai-modals/AiSyncProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport Sync from '../../assets/icons/sync.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { ProgressBarComponent } from '../progress-bar';\nimport { BodyPrimary, TitleLarge } from '../TypographyStyle';\n\nexport const AiSyncProgress: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tcompletedPercent: number;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n}> = ({\n\topen,\n\tonModalClose,\n\tcompletedPercent,\n\tonLeftBtnClick,\n\tonRightBtnClick,\n}) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\theight: '324px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleLarge>Wait for Sync to complete</TitleLarge>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Sync width={24} height={24} />\n\t\t\t\t\t\t<BodyPrimary color=\"#616161\">\n\t\t\t\t\t\t\tSyncing Shopify Store Data...\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ProgressBarComponent\n\t\t\t\t\t\tcompleted={completedPercent}\n\t\t\t\t\t\tisAnimated={false}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.background.positive.vibrant}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\tYou can start replying with AI after sync is complete. In the\n\t\t\t\t\tmeanwhile, learn how to leverage AI for maximum efficiency\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Close'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Explore Bik.ai'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiSyncProgress","~~_ref","~~open","onModalClose","completedPercent","onLeftBtnClick","onRightBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","height","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","TitleLarge","gap","Sync","BodyPrimary","color","ProgressBarComponent","completed","isAnimated","COLORS","background","positive","vibrant","content","secondary","alignItems","Button","buttonText","buttonType","size","onClick","backgroundColor","brand"],"mappings":"~~6XAQaA~~,~~MAAAA~~,~~EAMRC~~,~~IAMA~~,~~IANCC~~,~~KACLA~~,~~EAAIC~~,~~aACJA~~,~~EAAYC~~,~~iBACZA,EAAgBC,eAChBA,EAAcC,gBACdA,GACAL,EACA,OACCM,~~EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,MAAO,QACPC,OAAQ,QACRC,aAAc,QAEfC,QAASZ,EACTa,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAV,OAAAC,OAAA,CAAAU,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,WAGhB,CAAAL,SAAA,CAAAX,EAAA,MAAAE,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTE,eAAgB,WAChB,CAAAN,SAEDX,EAACkB,EAAU,CAAAP,SAAA,iCAGZX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,SACfG,IAAK,SAGN,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfG,IAAK,SACL,CAAAR,SAAA,CAEDX,EAACoB,EAAI,CAACf,MAAO,GAAIC,OAAQ,KACzBN,EAACqB,EAAYnB,OAAAC,OAAA,CAAAmB,MAAM,WAAS,CAAAX,SAAA,uCAI7BX,EAACuB,EAAoB,CACpBC,UAAW3B,EACX4B,YAAY,EACZnB,OAAQ,GACRgB,MAAOI,EAAOC,WAAWC,SAASC,cAGpC7B,SAAKa,MAAO,CAAEP,OAAQ,UAEtBN,EAACqB,EAAYnB,OAAAC,OAAA,CAAAmB,MAAOI,EAAOI,QAAQC,WAGrB,CAAApB,SAAA,8HAEdX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBe,WAAY,SACZb,IAAK,SACL,CAAAR,SAAA,CAEDX,EAACiC,EACA,CAAAC,WAAY,QACZC,WAAW,OACXC,KAAK,QACLC,QAASvC,IAEVE,EAACiC,GACAC,WAAY,iBACZE,KAAK,QACLvB,MAAO,CACNyB,gBAAiBZ,EAAOC,WAAWY,OAEpCF,QAAStC~~,cAIL~~"}
1	+ {"version":3,"file":"AiSyncProgress.js","sources":["../../../../src/components/ai-modals/AiSyncProgress.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport Sync from '../../assets/icons/sync.svg';\nimport { Button } from '../button/Button';\nimport { Modal } from '../modals/Modal';\nimport { ProgressBarComponent } from '../progress-bar';\nimport { BodyPrimary, TitleLarge } from '../TypographyStyle';\n\nexport const AiSyncProgress: React.FC<{\n\topen: boolean;\n\tonModalClose: () => void;\n\tcompletedPercent: number;\n\tonRightBtnClick: () => void;\n\tonLeftBtnClick: () => void;\n}> = ({\n\topen,\n\tonModalClose,\n\tcompletedPercent,\n\tonLeftBtnClick,\n\tonRightBtnClick,\n}) => {\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: '498px',\n\t\t\t\theight: '324px',\n\t\t\t\tborderRadius: '12px',\n\t\t\t}}\n\t\t\tonClose={onModalClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tzIndex={40}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tpadding: '24px',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleLarge>Wait for Sync to complete</TitleLarge>\n\t\t\t\t</div>\n\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Sync width={24} height={24} />\n\t\t\t\t\t\t<BodyPrimary color=\"#616161\">\n\t\t\t\t\t\t\tSyncing Shopify Store Data...\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ProgressBarComponent\n\t\t\t\t\t\tcompleted={completedPercent}\n\t\t\t\t\t\tisAnimated={false}\n\t\t\t\t\t\theight={16}\n\t\t\t\t\t\tcolor={COLORS.background.positive.vibrant}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div style={{ height: '24px' }}></div>\n\n\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\tYou can start replying with AI after sync is complete. In the\n\t\t\t\t\tmeanwhile, learn how to leverage AI for maximum efficiency\n\t\t\t\t</BodyPrimary>\n\n\t\t\t\t<div style={{ height: '32px' }}></div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: '12px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Close'}\n\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={onLeftBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Explore Bik.ai'}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: COLORS.background.brand,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={onRightBtnClick}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n};\n"],"names":["AiSyncProgress","open","onModalClose","completedPercent","onLeftBtnClick","onRightBtnClick","_jsx","Modal","Object","assign","centralContainerStyles","width","height","borderRadius","onClose","closeOnOutsideClick","zIndex","children","_jsxs","style","padding","display","flexDirection","justifyContent","TitleLarge","gap","Sync","BodyPrimary","color","ProgressBarComponent","completed","isAnimated","COLORS","background","positive","vibrant","content","secondary","alignItems","Button","buttonText","buttonType","size","onClick","backgroundColor","brand"],"mappings":"6XAQO,MAAMA,EAMRA,EACJC,OACAC,eACAC,mBACAC,iBACAC,qBAGCC,EAACC,EAAKC,OAAAC,OAAA,CACLR,KAAMA,EACNS,uBAAwB,CACvBC,MAAO,QACPC,OAAQ,QACRC,aAAc,QAEfC,QAASZ,EACTa,qBAAmB,EACnBC,OAAQ,IAAE,CAAAC,SAEVC,EACC,MAAAV,OAAAC,OAAA,CAAAU,MAAO,CACNC,QAAS,OACTC,QAAS,OACTC,cAAe,WAGhB,CAAAL,SAAA,CAAAX,EAAA,MAAAE,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTE,eAAgB,WAChB,CAAAN,SAEDX,EAACkB,EAAU,CAAAP,SAAA,iCAGZX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,SACfG,IAAK,SAGN,CAAAR,SAAA,CAAAC,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfG,IAAK,SACL,CAAAR,SAAA,CAEDX,EAACoB,EAAI,CAACf,MAAO,GAAIC,OAAQ,KACzBN,EAACqB,EAAYnB,OAAAC,OAAA,CAAAmB,MAAM,WAAS,CAAAX,SAAA,uCAI7BX,EAACuB,EAAoB,CACpBC,UAAW3B,EACX4B,YAAY,EACZnB,OAAQ,GACRgB,MAAOI,EAAOC,WAAWC,SAASC,cAGpC7B,SAAKa,MAAO,CAAEP,OAAQ,UAEtBN,EAACqB,EAAYnB,OAAAC,OAAA,CAAAmB,MAAOI,EAAOI,QAAQC,WAGrB,CAAApB,SAAA,8HAEdX,SAAKa,MAAO,CAAEP,OAAQ,UAEtBM,EAAA,MAAAV,OAAAC,OAAA,CACCU,MAAO,CACNE,QAAS,OACTC,cAAe,MACfC,eAAgB,WAChBe,WAAY,SACZb,IAAK,SACL,CAAAR,SAAA,CAEDX,EAACiC,EACA,CAAAC,WAAY,QACZC,WAAW,OACXC,KAAK,QACLC,QAASvC,IAEVE,EAACiC,GACAC,WAAY,iBACZE,KAAK,QACLvB,MAAO,CACNyB,gBAAiBZ,EAAOC,WAAWY,OAEpCF,QAAStC"}

package/dist/esm/components/analytics-card/AnalyticsCard.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsCard.styled.js","sources":["../../../../src/components/analytics-card/AnalyticsCard.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { ModeType } from './AnalyticsCard.model';\n\nexport const AnalyticsContainer = styled.div<{\n\twidth: string;\n\tmode?: ModeType;\n\tcount?: number;\n}>`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\trow-gap: 16px;\n\talign-items: center;\n\tjustify-content: space-evenly;\n\n\t${(props) => (props.width ? `width: ${props.width}` : 'width: 280px')};\n\tbackground: ${(props) =>\n\t\tprops.mode == 'light'\n\t\t\t? BASE_COLORS.grayscale['100']\n\t\t\t: BASE_COLORS.brand['900']};\n\tpadding: 26px 12px 16px 12px;\n\tborder-radius: 0 0 8px 8px;\n\n\t.analytics__card:nth-child(n + 4) {\n\t\t${(props) =>\n\t\t\tprops.count == 5\n\t\t\t\t? 'flex-basis: 48%'\n\t\t\t\t: props.count == 6 \|\| props.count == 7\n\t\t\t\t? 'flex-basis: 31%'\n\t\t\t\t: props.count == 8\n\t\t\t\t? 'flex-basis: 23%'\n\t\t\t\t: ''};\n\t}\n\n\t.analytics__card:nth-child(4) {\n\t\t${(props) => (props.count == 7 ? 'flex-basis: 23% !important' : '')}\n\t}\n\n\t.shimmers {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\t.shine {\n\t\t\tmargin-top: 2px !important;\n\t\t}\n\t}\n`;\n\nexport const CardDataContainer = styled.div<{\n\tcount: number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\trow-gap: 4px;\n\n\tflex-grow: 1;\n\tflex-shrink: 0;\n\tflex-basis: ${(props) =>\n\t\tprops.count == 2\n\t\t\t? '48%'\n\t\t\t: props.count == 3\n\t\t\t? '31%'\n\t\t\t: props.count == 4\n\t\t\t? '23%'\n\t\t\t: props.count == 5\n\t\t\t? '31%'\n\t\t\t: props.count == 6\n\t\t\t? '31%'\n\t\t\t: props.count == 7\n\t\t\t? '23%'\n\t\t\t: props.count == 8\n\t\t\t? '23%'\n\t\t\t: 'auto'};\n\n\t.category,\n\t.statistic {\n\t\tmax-width: 100%;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n"],"names":["AnalyticsContainer","_styled","process","env","NODE_ENV","target","label","props","width","mode","BASE_COLORS","grayscale","brand","count","CardDataContainer"],"mappings":"2FAIO,MAAMA,EAAkBC,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,sBAAAL,CAAA,6FAW3BM,GAAWA,EAAMC,~~MAAkB~~,~~UAAAD~~,EAAMC,QAAU,gBAAe,gBACtDD,GACA,SAAdA,EAAME,KACHC,EAAYC,UAAU,KACtBD,EAAYE,MAAM,MAKlBL,6FAAAA,GACa,GAAfA,EAAMM,MACH,kBACe,GAAfN,EAAMM,OAA6B,GAAfN,EAAMM,MAC1B,kBACe,GAAfN,EAAMM,MACN,kBACA,IAIDN,oCAAAA,GAA0B,GAAfA,EAAMM,MAAa,6BAA+B,IAAGX,uEAUpE,eAVoEA,QAAAC,IAAAC,SAUpE,GAAA,4vFAEYU,EAAiBb,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,qBAAAL,CAAA,kIAWdM,GACC,GAAfA,EAAMM,MACH,MACe,GAAfN,EAAMM,MACN,MACe,GAAfN,EAAMM,MACN,MACe,GAAfN,EAAMM,OAES,GAAfN,EAAMM,MADN,MAGe,GAAfN,EAAMM,OAES,GAAfN,EAAMM,MADN,MAGA,QAAM,oGASV,eATUX,QAAAC,IAAAC,SASV,GAAA"}
1	+ {"version":3,"file":"AnalyticsCard.styled.js","sources":["../../../../src/components/analytics-card/AnalyticsCard.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { ModeType } from './AnalyticsCard.model';\n\nexport const AnalyticsContainer = styled.div<{\n\twidth: string;\n\tmode?: ModeType;\n\tcount?: number;\n}>`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\trow-gap: 16px;\n\talign-items: center;\n\tjustify-content: space-evenly;\n\n\t${(props) => (props.width ? `width: ${props.width}` : 'width: 280px')};\n\tbackground: ${(props) =>\n\t\tprops.mode == 'light'\n\t\t\t? BASE_COLORS.grayscale['100']\n\t\t\t: BASE_COLORS.brand['900']};\n\tpadding: 26px 12px 16px 12px;\n\tborder-radius: 0 0 8px 8px;\n\n\t.analytics__card:nth-child(n + 4) {\n\t\t${(props) =>\n\t\t\tprops.count == 5\n\t\t\t\t? 'flex-basis: 48%'\n\t\t\t\t: props.count == 6 \|\| props.count == 7\n\t\t\t\t? 'flex-basis: 31%'\n\t\t\t\t: props.count == 8\n\t\t\t\t? 'flex-basis: 23%'\n\t\t\t\t: ''};\n\t}\n\n\t.analytics__card:nth-child(4) {\n\t\t${(props) => (props.count == 7 ? 'flex-basis: 23% !important' : '')}\n\t}\n\n\t.shimmers {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t\t.shine {\n\t\t\tmargin-top: 2px !important;\n\t\t}\n\t}\n`;\n\nexport const CardDataContainer = styled.div<{\n\tcount: number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\trow-gap: 4px;\n\n\tflex-grow: 1;\n\tflex-shrink: 0;\n\tflex-basis: ${(props) =>\n\t\tprops.count == 2\n\t\t\t? '48%'\n\t\t\t: props.count == 3\n\t\t\t? '31%'\n\t\t\t: props.count == 4\n\t\t\t? '23%'\n\t\t\t: props.count == 5\n\t\t\t? '31%'\n\t\t\t: props.count == 6\n\t\t\t? '31%'\n\t\t\t: props.count == 7\n\t\t\t? '23%'\n\t\t\t: props.count == 8\n\t\t\t? '23%'\n\t\t\t: 'auto'};\n\n\t.category,\n\t.statistic {\n\t\tmax-width: 100%;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n`;\n"],"names":["AnalyticsContainer","_styled","process","env","NODE_ENV","target","label","props","width","mode","BASE_COLORS","grayscale","brand","count","CardDataContainer"],"mappings":"2FAIO,MAAMA,EAAkBC,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,sBAAAL,CAAA,6FAW3BM,GAAWA,EAAMC,MAAQ,UAAUD,EAAMC,QAAU,gBAAe,gBACtDD,GACA,SAAdA,EAAME,KACHC,EAAYC,UAAU,KACtBD,EAAYE,MAAM,MAKlBL,6FAAAA,GACa,GAAfA,EAAMM,MACH,kBACe,GAAfN,EAAMM,OAA6B,GAAfN,EAAMM,MAC1B,kBACe,GAAfN,EAAMM,MACN,kBACA,IAIDN,oCAAAA,GAA0B,GAAfA,EAAMM,MAAa,6BAA+B,IAAGX,uEAUpE,eAVoEA,QAAAC,IAAAC,SAUpE,GAAA,4vFAEYU,EAAiBb,QAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,YAAA,CAAAA,OAAA,WAAAC,MAAA,qBAAAL,CAAA,kIAWdM,GACC,GAAfA,EAAMM,MACH,MACe,GAAfN,EAAMM,MACN,MACe,GAAfN,EAAMM,MACN,MACe,GAAfN,EAAMM,OAES,GAAfN,EAAMM,MADN,MAGe,GAAfN,EAAMM,OAES,GAAfN,EAAMM,MADN,MAGA,QAAM,oGASV,eATUX,QAAAC,IAAAC,SASV,GAAA"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as s}from"react";import{Dropdown as l}from"react-bootstrap";import r from"react-dom";import{DEFAULT_THEME as d,BASE_COLORS as a}from"../../constants/Theme.js";import{DatePicker as c}from"../datePicker/DatePicker.js";import"react-calendar";import"../../utils/DateUtils.js";import{BodySecondary as p,BodyCaption as m,Caption as u}from"../TypographyStyle.js";import"../datePicker/DatePickerWrapper.styled.js";import"../datePicker/model.js";import"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import"../../_virtual/_tslib.js";import"lodash/debounce";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import"../datePicker/DatePicker.styled.js";import{MainDropdown as g,ItemMenuContainer as v}from"./CommonStyles.js";const w=a=>{let{options:m,placeholder:v="Select an option",selected:w,onOptionSelected:h,resetDropdown:b,maxHeight:y,backgroundcolor:D,calendarPopperConfig:k,variant:f="default",datePickerPlacement:S,closeDropdown:I,labelColor:P,styleProps:R,showTimePicker:C=!1}=a;var x,L,T;const[F,$]=n(!1),[M,B]=n(w),[E,A]=n(),[N,H]=n(!1),[V,_]=n(w),z=i(null),U="small"===f?u:p;s((()=>{b&&B(void 0)}),[b]),s((()=>{var e;(null==w?void 0:w.isCustom)&&(null===(e=w.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?A(w.dateRangeSelectionOptions.selectedDates):A(void 0),B(w)}),[w]),s((()=>{H(!1),$(!1)}),[I]);const W=e=>{void 0!==e?(H(e),F&&$(!1)):H((e=>!e))},Y=e=>{z.current&&!z.current.contains(e.target)&&(F&&$(!1),W(!1))};return s((()=>(N&&document.addEventListener("mousedown",Y),()=>{document.removeEventListener("mousedown",Y)})),[N]),e(o,{children:t(g,Object.assign({drop:"down",show:N,onToggle:W,bgColor:D,id:"analytic-dropdown"},{children:[e(l.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===f?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${d.colorsV2.stroke.primary}`}:R||void 0},{children:e(U,Object.assign({style:"small"===f||P?{color:P||d.colorsV2.content.secondary}:void 0},{children:(null==M?void 0:M.isCustom)?E?O(E[0],C)===O(E[1],C)?`${O(E[0],C)}`:`${O(E[0],C)} to ${O(E[1],C)}`:(null==V?void 0:V.label)?null==V?void 0:V.label:v:M?null==M?void 0:M.label:v}))})),r.createPortal(e(l.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:z},{children:t(g,Object.assign({drop:null!=S?S:"end",id:"sub--dropdown",show:F,onToggle:e=>{!e&&H(!1),$(!F)}},{children:[e("div",Object.assign({style:{maxHeight:y||"auto",overflowY:"scroll"}},{children:m.map(((o,t)=>{var n;return e("div",{children:(null==o?void 0:o.isCustom)?e(l.Toggle,Object.assign({className:"sub--dropdown"},{children:e(j,{isFirstItem:0===t,isLastItem:t===m.length-1,eachOption:o,selectedOption:M,selectedDate:E,onClickingEachItem:e=>{B(e),$(!0)},rangeSelection:!!(null===(n=null==o?void 0:o.dateRangeSelectionOptions)||void 0===n?void 0:n.selectRange),showTimePicker:C})})):e(j,{isFirstItem:0===t,isLastItem:t===m.length-1,eachOption:o,selectedOption:M,selectedDate:E,onClickingEachItem:e=>{if(A(void 0),B(e),_(e),W(),!e.noOfDays)return void h(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),h(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:C})},null==o?void 0:o.key)}))})),e(l.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==k?void 0:k.offsetSkid)||0,(null==k?void 0:k.offsetDistance)||0]}}]}},{children:e(c,{selectRange:(null===(x=null==M?void 0:M.dateRangeSelectionOptions)||void 0===x?void 0:x.selectRange)||!1,showTimePicker:C,maxDate:null===(L=null==M?void 0:M.dateRangeSelectionOptions)||void 0===L?void 0:L.maxDate,minDate:null===(T=null==M?void 0:M.dateRangeSelectionOptions)||void 0===T?void 0:T.minDate,selectedDates:E,onSelectRange:(e,o)=>{const t=[e,o];(null==M?void 0:M.dateRangeSelectionOptions)&&(M.dateRangeSelectionOptions.selectedDates=t,h(Object.assign(Object.assign({},M),{selectedRange:[e,o]}))),_(M),$(!1),A(t),H(!N)},onSelectDate:e=>{(null==M?void 0:M.dateRangeSelectionOptions)&&(M.dateRangeSelectionOptions.selectedDates=[e,e],h(Object.assign(Object.assign({},M),{selectedRange:[e,e]}))),_(M),$(!1),A([e,e]),H(!N)}})}))]}))})),document.body)]}))})},j=n=>{let{eachOption:i,selectedOption:s,selectedDate:l,onClickingEachItem:r,rangeSelection:d,isLastItem:c,isFirstItem:u,showTimePicker:g}=n;return t(v,Object.assign({isFirstItem:u,isLastItem:c,onClick:()=>r(i),isSelected:i.isCustom?i.key==(null==s?void 0:s.key)&&!!l:i.key==(null==s?void 0:s.key)},{children:[e(p,Object.assign({color:i.key==(null==s?void 0:s.key)?a.positive[900]:a.grayscale[900]},{children:i.label})),i.subLabel?e(m,Object.assign({style:{color:a.grayscale[700]}},{children:i.subLabel})):e(o,{}),l&&(null==s?void 0:s.isCustom)&&i.key==(null==s?void 0:s.key)&&e(m,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:d?`${O(l[0],g)} to ${O(l[1],g)}`:`${O(l[0],g)}`}))]}),i.key)},O=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};export{w as AnalyticsDropdown,j as EachItem,O as formatDate};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useRef as i,useEffect as s}from"react";import{Dropdown as l}from"react-bootstrap";import r from"react-dom";import{DEFAULT_THEME as d,BASE_COLORS as a}from"../../constants/Theme.js";import{DatePicker as c}from"../datePicker/DatePicker.js";import"react-calendar";import"../../utils/DateUtils.js";import{BodySecondary as p,BodyCaption as m,Caption as u}from"../TypographyStyle.js";import"../datePicker/DatePickerWrapper.styled.js";import"../datePicker/model.js";import"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import"../../_virtual/_tslib.js";import"lodash/debounce";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import"../datePicker/DatePicker.styled.js";import{MainDropdown as g,ItemMenuContainer as v}from"./CommonStyles.js";const w=({options:a,placeholder:m="Select an option",selected:v,onOptionSelected:w,resetDropdown:h,maxHeight:b,backgroundcolor:y,calendarPopperConfig:D,variant:k="default",datePickerPlacement:f,closeDropdown:S,labelColor:I,styleProps:P,showTimePicker:R=!1})=>{var C,x,L;const[T,F]=n(!1),[$,M]=n(v),[B,E]=n(),[A,N]=n(!1),[H,V]=n(v),_=i(null),z="small"===k?u:p;s((()=>{h&&M(void 0)}),[h]),s((()=>{var e;(null==v?void 0:v.isCustom)&&(null===(e=v.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?E(v.dateRangeSelectionOptions.selectedDates):E(void 0),M(v)}),[v]),s((()=>{N(!1),F(!1)}),[S]);const U=e=>{void 0!==e?(N(e),T&&F(!1)):N((e=>!e))},W=e=>{_.current&&!_.current.contains(e.target)&&(T&&F(!1),U(!1))};return s((()=>(A&&document.addEventListener("mousedown",W),()=>{document.removeEventListener("mousedown",W)})),[A]),e(o,{children:t(g,Object.assign({drop:"down",show:A,onToggle:U,bgColor:y,id:"analytic-dropdown"},{children:[e(l.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===k?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${d.colorsV2.stroke.primary}`}:P||void 0},{children:e(z,Object.assign({style:"small"===k||I?{color:I||d.colorsV2.content.secondary}:void 0},{children:(null==$?void 0:$.isCustom)?B?O(B[0],R)===O(B[1],R)?`${O(B[0],R)}`:`${O(B[0],R)} to ${O(B[1],R)}`:(null==H?void 0:H.label)?null==H?void 0:H.label:m:$?null==$?void 0:$.label:m}))})),r.createPortal(e(l.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:_},{children:t(g,Object.assign({drop:null!=f?f:"end",id:"sub--dropdown",show:T,onToggle:e=>{!e&&N(!1),F(!T)}},{children:[e("div",Object.assign({style:{maxHeight:b||"auto",overflowY:"scroll"}},{children:a.map(((o,t)=>{var n;return e("div",{children:(null==o?void 0:o.isCustom)?e(l.Toggle,Object.assign({className:"sub--dropdown"},{children:e(j,{isFirstItem:0===t,isLastItem:t===a.length-1,eachOption:o,selectedOption:$,selectedDate:B,onClickingEachItem:e=>{M(e),F(!0)},rangeSelection:!!(null===(n=null==o?void 0:o.dateRangeSelectionOptions)||void 0===n?void 0:n.selectRange),showTimePicker:R})})):e(j,{isFirstItem:0===t,isLastItem:t===a.length-1,eachOption:o,selectedOption:$,selectedDate:B,onClickingEachItem:e=>{if(E(void 0),M(e),V(e),U(),!e.noOfDays)return void w(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),w(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:R})},null==o?void 0:o.key)}))})),e(l.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==D?void 0:D.offsetSkid)||0,(null==D?void 0:D.offsetDistance)||0]}}]}},{children:e(c,{selectRange:(null===(C=null==$?void 0:$.dateRangeSelectionOptions)||void 0===C?void 0:C.selectRange)||!1,showTimePicker:R,maxDate:null===(x=null==$?void 0:$.dateRangeSelectionOptions)||void 0===x?void 0:x.maxDate,minDate:null===(L=null==$?void 0:$.dateRangeSelectionOptions)||void 0===L?void 0:L.minDate,selectedDates:B,onSelectRange:(e,o)=>{const t=[e,o];(null==$?void 0:$.dateRangeSelectionOptions)&&($.dateRangeSelectionOptions.selectedDates=t,w(Object.assign(Object.assign({},$),{selectedRange:[e,o]}))),V($),F(!1),E(t),N(!A)},onSelectDate:e=>{(null==$?void 0:$.dateRangeSelectionOptions)&&($.dateRangeSelectionOptions.selectedDates=[e,e],w(Object.assign(Object.assign({},$),{selectedRange:[e,e]}))),V($),F(!1),E([e,e]),N(!A)}})}))]}))})),document.body)]}))})},j=({eachOption:n,selectedOption:i,selectedDate:s,onClickingEachItem:l,rangeSelection:r,isLastItem:d,isFirstItem:c,showTimePicker:u})=>t(v,Object.assign({isFirstItem:c,isLastItem:d,onClick:()=>l(n),isSelected:n.isCustom?n.key==(null==i?void 0:i.key)&&!!s:n.key==(null==i?void 0:i.key)},{children:[e(p,Object.assign({color:n.key==(null==i?void 0:i.key)?a.positive[900]:a.grayscale[900]},{children:n.label})),n.subLabel?e(m,Object.assign({style:{color:a.grayscale[700]}},{children:n.subLabel})):e(o,{}),s&&(null==i?void 0:i.isCustom)&&n.key==(null==i?void 0:i.key)&&e(m,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:r?`${O(s[0],u)} to ${O(s[1],u)}`:`${O(s[0],u)}`}))]}),n.key),O=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};export{w as AnalyticsDropdown,j as EachItem,O as formatDate};
 //# sourceMappingURL=AnalyticsDropdown.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","_ref","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","undefined","isCustom","_a","dateRangeSelectionOptions","selectedDates","setDropdown","forceState","prevState","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","_jsx","_Fragment","children","_jsxs","MainDropdown","Object","assign","drop","show","onToggle","bgColor","id","Dropdown","Toggle","className","style","display","alignItems","gap","padding","backgroundColor","borderRadius","border","DEFAULT_THEME","colorsV2","stroke","primary","color","content","secondary","formatDate","label","ReactDOM","createPortal","Menu","ref","toggleCalender","overflowY","map","eachOption","index","EachItem","isFirstItem","isLastItem","length","onClickingEachItem","option","rangeSelection","selectRange","noOfDays","endDate","Date","startDate","setDate","getDate","selectedRange","key","popperConfig","modifiers","name","offset","offsetSkid","offsetDistance","DatePicker","maxDate","_b","minDate","_c","onSelectRange","selectedStartDate","selectedEndDate","updatedDates","onSelectDate","body","_ref2","ItemMenuContainer","onClick","isSelected","BASE_COLORS","positive","grayscale","subLabel","BodyCaption","whiteSpace","wordBreak","textAlign","dateVal","includeTime","dateString","toLocaleString","day","month","year","hour","minute","hour12"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","undefined","isCustom","_a","dateRangeSelectionOptions","selectedDates","setDropdown","forceState","prevState","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","_jsx","_Fragment","children","_jsxs","MainDropdown","Object","assign","drop","show","onToggle","bgColor","id","Dropdown","Toggle","className","style","display","alignItems","gap","padding","backgroundColor","borderRadius","border","DEFAULT_THEME","colorsV2","stroke","primary","color","content","secondary","formatDate","label","ReactDOM","createPortal","Menu","ref","toggleCalender","overflowY","map","eachOption","index","EachItem","isFirstItem","isLastItem","length","onClickingEachItem","option","rangeSelection","selectRange","noOfDays","endDate","Date","startDate","setDate","getDate","selectedRange","key","popperConfig","modifiers","name","offset","offsetSkid","offsetDistance","DatePicker","maxDate","_b","minDate","_c","onSelectRange","selectedStartDate","selectedEndDate","updatedDates","onSelectDate","body","ItemMenuContainer","onClick","isSelected","BASE_COLORS","positive","grayscale","subLabel","BodyCaption","whiteSpace","wordBreak","textAlign","dateVal","includeTime","dateString","toLocaleString","day","month","year","hour","minute","hour12"],"mappings":"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"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsMetric.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import g from"@emotion/styled/base";import{jsxs as I,jsx as C,Fragment as A}from"react/jsx-runtime";import{COLORS as l}from"../../constants/Theme.js";import{TitleMedium as c,TitleRegular as e}from"../TypographyStyle.js";import{AnalyticsTrend as b}from"./AnalyticsTrend.js";const t=g("div","production"===process.env.NODE_ENV?{target:"e1bel8cf0"}:{target:"e1bel8cf0",label:"TrendContainer"})("production"===process.env.NODE_ENV?{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap"}:{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tDIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIGlzTG9hZGluZywgdHJlbmRTdHlsZSwgdHJlbmRDb250YWluZXJTdHlsZSwgdHJlbmRJY29uU3R5bGUsIGhpZGVIZWFkZXJEaXYsIGlzSW50ZXJuYXRpb25hbFN0b3JlLCB9KSA9PiB7XHJcbiAgICBjb25zdCBUeXBvID0gdGl0bGVTaXplID09PSAnbGFyZ2UnID8gVGl0bGVNZWRpdW0gOiBUaXRsZVJlZ3VsYXI7XHJcbiAgICBjb25zdCBwZXJSb3dMb2NhbCA9IHBlclJvdyB8fFxyXG4gICAgICAgICh0cmVuZHMubGVuZ3RoIDw9IDQgPyB0cmVuZHMubGVuZ3RoIDogdHJlbmRzLmxlbmd0aCAlIDMgPT0gMCA/IDMgOiA0KTtcclxuICAgIGNvbnN0IHJvd3MgPSBNYXRoLmNlaWwodHJlbmRzLmxlbmd0aCAvIHBlclJvd0xvY2FsKTtcclxuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiBPYmplY3QuYXNzaWduKHsgcGFkZGluZ1RvcDogMjQsIHBhZGRpbmdCb3R0b206IDI0IH0sIChjb250YWluZXJTdHlsZSAhPT0gbnVsbCAmJiBjb250YWluZXJTdHlsZSAhPT0gdm9pZCAwID8gY29udGFpbmVyU3R5bGUgOiB7fSkpIH0sIHsgY2hpbGRyZW46IFtfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IHtcclxuICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXHJcbiAgICAgICAgICAgICAgICAgICAgZmxleERpcmVjdGlvbjogJ3JvdycsXHJcbiAgICAgICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdzcGFjZS1iZXR3ZWVuJyxcclxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nQm90dG9tOiBoaWRlSGVhZGVyRGl2ID8gMCA6IDEyLFxyXG4gICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBbdGl0bGUgJiYgKF9qc3goVHlwbywgT2JqZWN0LmFzc2lnbih7IGNvbG9yOiB0aXRsZUNvbG9yICE9PSBudWxsICYmIHRpdGxlQ29sb3IgIT09IHZvaWQgMCA/IHRpdGxlQ29sb3IgOiBDT0xPUlMuY29udGVudC5zZWNvbmRhcnksIHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDI0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IHRpdGxlIH0pKSksIFJpZ2h0SGVhZGVyQ29tcG9uZW50XSB9KSksIF9qc3goVHJlbmRDb250YWluZXIsIHsgY2hpbGRyZW46IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSkubWFwKChfLCByb3dJbmRleCkgPT4gKF9qc3goX0ZyYWdtZW50LCB7IGNoaWxkcmVuOiBfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJyxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpblRvcDogcm93SW5kZXggPT09IDAgPyAwIDogMTYsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIH0gfSwgeyBjaGlsZHJlbjogdHJlbmRzXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2xpY2Uocm93SW5kZXggKiBwZXJSb3dMb2NhbCwgKHJvd0luZGV4ICsgMSkgKiBwZXJSb3dMb2NhbClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5tYXAoKHRyZW5kLCBpKSA9PiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgX2E7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZsZXg6IDEsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiB0cmVuZHMubGVuZ3RoID09PSAxID8gJzEwMCUnIDogJzUwJScsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBfanN4KEFuYWx5dGljc1RyZW5kLCBPYmplY3QuYXNzaWduKHt9LCB0cmVuZCwgeyBpc0xvYWRpbmc6IGlzTG9hZGluZywgY2FyZDogZmFsc2UsIHNpemU6IChfYSA9IHRyZW5kLnNpemUpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6ICdzbWFsbCcsIHJpZ2h0U2VwYXJhdG9yOiBpICsgcm93SW5kZXggKiBwZXJSb3dMb2NhbCA8XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBNYXRoLm1pbigocm93SW5kZXggKyAxKSAqIHBlclJvd0xvY2FsIC0gMSwgdHJlbmRzLmxlbmd0aCAtIDEpLCB0cmVuZFN0eWxlOiB0cmVuZFN0eWxlLCB0cmVuZEljb25TdHlsZTogdHJlbmRJY29uU3R5bGUsIHRyZW5kQ29udGFpbmVyU3R5bGU6IHRyZW5kQ29udGFpbmVyU3R5bGUsIGlzSW50ZXJuYXRpb25hbFN0b3JlOiBpc0ludGVybmF0aW9uYWxTdG9yZSB9KSkgfSksIGkpKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSkgfSksIHJvd0luZGV4KSB9KSkpIH0pXSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmFseXRpY3NNZXRyaWMuanMubWFwIl19 */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),d=g=>{let{title:d,trends:i,RightHeaderComponent:n,containerStyle:s,titleSize:Z,titleColor:a,perRow:o,isLoading:m,trendStyle:G,trendContainerStyle:u,trendIconStyle:y,hideHeaderDiv:p,isInternationalStore:J}=g;const H="large"===Z?c:e,X=o||(i.length<=4?i.length:i.length%3==0?3:4),r=Math.ceil(i.length/X);return I("div",Object.assign({style:Object.assign({paddingTop:24,paddingBottom:24},null!=s?s:{})},{children:[I("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:p?0:12}},{children:[d&&C(H,Object.assign({color:null!=a?a:l.content.secondary,style:{paddingLeft:24,paddingRight:24}},{children:d})),n]})),C(t,{children:Array.from({length:r}).map(((g,I)=>C(A,{children:C("div",Object.assign({style:{display:"flex",width:"100%",marginTop:0===I?0:16}},{children:i.slice(I*X,(I+1)*X).map(((g,A)=>{var l;return C("div",Object.assign({style:{flex:1,maxWidth:1===i.length?"100%":"50%"}},{children:C(b,Object.assign({},g,{isLoading:m,card:!1,size:null!==(l=g.size)&&void 0!==l?l:"small",rightSeparator:A+I*X<Math.min((I+1)*X-1,i.length-1),trendStyle:G,trendIconStyle:y,trendContainerStyle:u,isInternationalStore:J}))}),A)}))}),I)})))})]}))};export{d as AnalyticsMetric};
+import g from"@emotion/styled/base";import{jsxs as I,jsx as C,Fragment as A}from"react/jsx-runtime";import{COLORS as l}from"../../constants/Theme.js";import{TitleMedium as c,TitleRegular as e}from"../TypographyStyle.js";import{AnalyticsTrend as b}from"./AnalyticsTrend.js";const t=g("div","production"===process.env.NODE_ENV?{target:"e1bel8cf0"}:{target:"e1bel8cf0",label:"TrendContainer"})("production"===process.env.NODE_ENV?{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap"}:{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tDIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIGlzTG9hZGluZywgdHJlbmRTdHlsZSwgdHJlbmRDb250YWluZXJTdHlsZSwgdHJlbmRJY29uU3R5bGUsIGhpZGVIZWFkZXJEaXYsIGlzSW50ZXJuYXRpb25hbFN0b3JlLCB9KSA9PiB7XHJcbiAgICBjb25zdCBUeXBvID0gdGl0bGVTaXplID09PSAnbGFyZ2UnID8gVGl0bGVNZWRpdW0gOiBUaXRsZVJlZ3VsYXI7XHJcbiAgICBjb25zdCBwZXJSb3dMb2NhbCA9IHBlclJvdyB8fFxyXG4gICAgICAgICh0cmVuZHMubGVuZ3RoIDw9IDQgPyB0cmVuZHMubGVuZ3RoIDogdHJlbmRzLmxlbmd0aCAlIDMgPT0gMCA/IDMgOiA0KTtcclxuICAgIGNvbnN0IHJvd3MgPSBNYXRoLmNlaWwodHJlbmRzLmxlbmd0aCAvIHBlclJvd0xvY2FsKTtcclxuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiBPYmplY3QuYXNzaWduKHsgcGFkZGluZ1RvcDogMjQsIHBhZGRpbmdCb3R0b206IDI0IH0sIChjb250YWluZXJTdHlsZSAhPT0gbnVsbCAmJiBjb250YWluZXJTdHlsZSAhPT0gdm9pZCAwID8gY29udGFpbmVyU3R5bGUgOiB7fSkpIH0sIHsgY2hpbGRyZW46IFtfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IHtcclxuICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXHJcbiAgICAgICAgICAgICAgICAgICAgZmxleERpcmVjdGlvbjogJ3JvdycsXHJcbiAgICAgICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdzcGFjZS1iZXR3ZWVuJyxcclxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nQm90dG9tOiBoaWRlSGVhZGVyRGl2ID8gMCA6IDEyLFxyXG4gICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBbdGl0bGUgJiYgKF9qc3goVHlwbywgT2JqZWN0LmFzc2lnbih7IGNvbG9yOiB0aXRsZUNvbG9yICE9PSBudWxsICYmIHRpdGxlQ29sb3IgIT09IHZvaWQgMCA/IHRpdGxlQ29sb3IgOiBDT0xPUlMuY29udGVudC5zZWNvbmRhcnksIHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDI0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IHRpdGxlIH0pKSksIFJpZ2h0SGVhZGVyQ29tcG9uZW50XSB9KSksIF9qc3goVHJlbmRDb250YWluZXIsIHsgY2hpbGRyZW46IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSkubWFwKChfLCByb3dJbmRleCkgPT4gKF9qc3goX0ZyYWdtZW50LCB7IGNoaWxkcmVuOiBfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJyxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpblRvcDogcm93SW5kZXggPT09IDAgPyAwIDogMTYsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIH0gfSwgeyBjaGlsZHJlbjogdHJlbmRzXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2xpY2Uocm93SW5kZXggKiBwZXJSb3dMb2NhbCwgKHJvd0luZGV4ICsgMSkgKiBwZXJSb3dMb2NhbClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5tYXAoKHRyZW5kLCBpKSA9PiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgX2E7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZsZXg6IDEsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiB0cmVuZHMubGVuZ3RoID09PSAxID8gJzEwMCUnIDogJzUwJScsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBfanN4KEFuYWx5dGljc1RyZW5kLCBPYmplY3QuYXNzaWduKHt9LCB0cmVuZCwgeyBpc0xvYWRpbmc6IGlzTG9hZGluZywgY2FyZDogZmFsc2UsIHNpemU6IChfYSA9IHRyZW5kLnNpemUpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6ICdzbWFsbCcsIHJpZ2h0U2VwYXJhdG9yOiBpICsgcm93SW5kZXggKiBwZXJSb3dMb2NhbCA8XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBNYXRoLm1pbigocm93SW5kZXggKyAxKSAqIHBlclJvd0xvY2FsIC0gMSwgdHJlbmRzLmxlbmd0aCAtIDEpLCB0cmVuZFN0eWxlOiB0cmVuZFN0eWxlLCB0cmVuZEljb25TdHlsZTogdHJlbmRJY29uU3R5bGUsIHRyZW5kQ29udGFpbmVyU3R5bGU6IHRyZW5kQ29udGFpbmVyU3R5bGUsIGlzSW50ZXJuYXRpb25hbFN0b3JlOiBpc0ludGVybmF0aW9uYWxTdG9yZSB9KSkgfSksIGkpKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSkgfSksIHJvd0luZGV4KSB9KSkpIH0pXSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmFseXRpY3NNZXRyaWMuanMubWFwIl19 */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),d=({title:g,trends:d,RightHeaderComponent:i,containerStyle:n,titleSize:s,titleColor:Z,perRow:a,isLoading:o,trendStyle:m,trendContainerStyle:G,trendIconStyle:u,hideHeaderDiv:y,isInternationalStore:p})=>{const J="large"===s?c:e,H=a||(d.length<=4?d.length:d.length%3==0?3:4),X=Math.ceil(d.length/H);return I("div",Object.assign({style:Object.assign({paddingTop:24,paddingBottom:24},null!=n?n:{})},{children:[I("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:y?0:12}},{children:[g&&C(J,Object.assign({color:null!=Z?Z:l.content.secondary,style:{paddingLeft:24,paddingRight:24}},{children:g})),i]})),C(t,{children:Array.from({length:X}).map(((g,I)=>C(A,{children:C("div",Object.assign({style:{display:"flex",width:"100%",marginTop:0===I?0:16}},{children:d.slice(I*H,(I+1)*H).map(((g,A)=>{var l;return C("div",Object.assign({style:{flex:1,maxWidth:1===d.length?"100%":"50%"}},{children:C(b,Object.assign({},g,{isLoading:o,card:!1,size:null!==(l=g.size)&&void 0!==l?l:"small",rightSeparator:A+I*H<Math.min((I+1)*H-1,d.length-1),trendStyle:m,trendIconStyle:u,trendContainerStyle:G,isInternationalStore:p}))}),A)}))}),I)})))})]}))};export{d as AnalyticsMetric};
 //# sourceMappingURL=AnalyticsMetric.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsMetric.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsMetric.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMetric.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { TitleMedium, TitleRegular } from '../TypographyStyle';\nimport { AnalyticsTrend, AnalyticsTrendInterface } from './AnalyticsTrend';\n\nconst TrendContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n`;\n\nexport const AnalyticsMetric: React.FC<{\n\ttitle?: string;\n\tRightHeaderComponent?: React.ReactElement;\n\ttrends: AnalyticsTrendInterface[];\n\tcontainerStyle?: React.CSSProperties;\n\ttrendStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\ttitleSize?: 'large' \| 'small';\n\ttitleColor?: string;\n\tperRow?: number;\n\tisLoading?: boolean;\n\thideHeaderDiv?: boolean;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n}> = ({\n\ttitle,\n\ttrends,\n\tRightHeaderComponent,\n\tcontainerStyle,\n\ttitleSize,\n\ttitleColor,\n\tperRow,\n\tisLoading,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\thideHeaderDiv,\n\tisInternationalStore,\n}) => {\n\tconst Typo = titleSize === 'large' ? TitleMedium : TitleRegular;\n\tconst perRowLocal =\n\t\tperRow \|\|\n\t\t(trends.length <= 4 ? trends.length : trends.length % 3 == 0 ? 3 : 4);\n\tconst rows = Math.ceil(trends.length / perRowLocal);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpaddingTop: 24,\n\t\t\t\tpaddingBottom: 24,\n\t\t\t\t...(containerStyle ?? {}),\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\tpaddingBottom: hideHeaderDiv ? 0 : 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{title && (\n\t\t\t\t\t<Typo\n\t\t\t\t\t\tcolor={titleColor ?? COLORS.content.secondary}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpaddingLeft: 24,\n\t\t\t\t\t\t\tpaddingRight: 24,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typo>\n\t\t\t\t)}\n\t\t\t\t{RightHeaderComponent}\n\t\t\t</div>\n\t\t\t<TrendContainer>\n\t\t\t\t{Array.from({ length: rows }).map((_, rowIndex) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tmarginTop: rowIndex === 0 ? 0 : 16,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={rowIndex}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{trends\n\t\t\t\t\t\t\t\t.slice(rowIndex * perRowLocal, (rowIndex + 1) * perRowLocal)\n\t\t\t\t\t\t\t\t.map((trend, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth: trends.length === 1 ? '100%' : '50%',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AnalyticsTrend\n\t\t\t\t\t\t\t\t\t\t\t{...trend}\n\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\t\t\t\t\tcard={false}\n\t\t\t\t\t\t\t\t\t\t\tsize={trend.size ?? 'small'}\n\t\t\t\t\t\t\t\t\t\t\trightSeparator={\n\t\t\t\t\t\t\t\t\t\t\t\ti + rowIndex * perRowLocal <\n\t\t\t\t\t\t\t\t\t\t\t\tMath.min(\n\t\t\t\t\t\t\t\t\t\t\t\t\t(rowIndex + 1) * perRowLocal - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttrends.length - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ttrendStyle={trendStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendContainerStyle={trendContainerStyle}\n\t\t\t\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t))}\n\t\t\t</TrendContainer>\n\t\t</div>\n\t);\n};\n\n/\n Card < 4 => x x x x x x x x x x\n Card % 3 =>\n x x x x x x x x x\n x x x x x\n x\n else perRow => 2\n x x x x x x\n x x x x x\n x\n else\n x x x x x x x x x x x x x x x\n x x x x x x\n/\n"],"names":["TrendContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","AnalyticsMetric","~~_ref","~~title","trends","RightHeaderComponent","containerStyle","titleSize","titleColor","perRow","isLoading","trendStyle","trendContainerStyle","trendIconStyle","hideHeaderDiv","isInternationalStore","Typo","TitleMedium","TitleRegular","perRowLocal","length","rows","Math","ceil","_jsxs","Object","assign","style","paddingTop","paddingBottom","children","display","flexDirection","justifyContent","_jsx","color","COLORS","content","secondary","paddingLeft","paddingRight","Array","from","_","rowIndex","_Fragment","width","marginTop","slice","trend","i","flex","maxWidth","AnalyticsTrend","card","size","_a","rightSeparator","min"],"mappings":"iRAMA,MAAMA,EAAcC,EAAA,MAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,aAAA,CAAAA,OAAA,YAAAC,MAAA,kBAAAL,CAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAG,KAAA,SAAAC,OAAA,kDAAA,CAAAD,KAAA,SAAAC,OAAA,iDAAAC,IAAA,kuIAAAC,+PAMPC,~~EAeRC~~,~~IAcA~~,~~IAdCC~~,~~MACLA~~,~~EAAKC~~,~~OACLA~~,~~EAAMC~~,~~qBACNA~~,~~EAAoBC~~,~~eACpBA~~,~~EAAcC~~,~~UACdA~~,~~EAASC~~,~~WACTA~~,~~EAAUC~~,~~OACVA~~,~~EAAMC,UACNA,EAASC,WACTA,EAAUC,oBACVA,EAAmBC,eACnBA,EAAcC,cACdA,EAAaC,qBACbA,GACAb,EACA,MAAMc,~~EAAqB,UAAdT,EAAwBU,EAAcC,EAC7CC,EACLV,IACCL,EAAOgB,QAAU,EAAIhB,EAAOgB,OAAShB,EAAOgB,OAAS,GAAK,EAAI,EAAI,GAC9DC,EAAOC,KAAKC,KAAKnB,EAAOgB,OAASD,GAEvC,OACCK,EACC,MAAAC,OAAAC,OAAA,CAAAC,MACCF,OAAAC,OAAA,CAAAE,WAAY,GACZC,cAAe,IACXvB,QAAAA,EAAkB,KAAG,CAAAwB,SAAA,CAG1BN,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNI,QAAS,OACTC,cAAe,MACfC,eAAgB,gBAChBJ,cAAef,EAAgB,EAAI,KAGnC,CAAAgB,SAAA,CAAA3B,GACA+B,EAAClB,EACAS,OAAAC,OAAA,CAAAS,MAAO3B,QAAAA,EAAc4B,EAAOC,QAAQC,UACpCX,MAAO,CACNY,YAAa,GACbC,aAAc,KACd,CAAAV,SAEA3B,KAGFE,MAEF6B,~~EAAC5C~~,~~YACCmD~~,MAAMC,KAAK,CAAEtB,OAAQC,~~IAAQtB~~,KAAI,~~CAAC4C~~,EAAGC,IACrCV,EACCW,EAAA,CAAAf,SAAAI,EAAA,MAAAT,OAAAC,OAAA,CACCC,MAAO,CACNI,QAAS,OACTe,MAAO,OACPC,UAAwB,IAAbH,EAAiB,EAAI,KAChC,CAAAd,SAGA1B,EACC4C,MAAMJ,EAAWzB,GAAcyB,EAAW,GAAKzB,GAC/~~CpB~~,KAAI,~~CAACkD~~,EAAOC,WAAM,OAClBhB,EACC,MAAAT,OAAAC,OAAA,CAAAC,MAAO,CACNwB,KAAM,EACNC,SAA4B,IAAlBhD,EAAOgB,OAAe,OAAS,QACzC,CAAAU,SAGDI,EAACmB,EACI5B,OAAAC,OAAA,CAAA,EAAAuB,EACJ,CAAAvC,UAAWA,EACX4C,MAAM,EACNC,KAAgB,QAAVC,EAAAP,EAAMM,YAAI,IAAAC,EAAAA,EAAI,QACpBC,eACCP,EAAIN,EAAWzB,EACfG,KAAKoC,KACHd,EAAW,GAAKzB,EAAc,EAC/Bf,EAAOgB,OAAS,GAGlBT,WAAYA,EACZE,eAAgBA,EAChBD,oBAAqBA,EACrBG,qBAAsBA,OAjBlBmC,EAmBA,MA7BHN,YAmCJ"}
1	+ {"version":3,"file":"AnalyticsMetric.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMetric.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { TitleMedium, TitleRegular } from '../TypographyStyle';\nimport { AnalyticsTrend, AnalyticsTrendInterface } from './AnalyticsTrend';\n\nconst TrendContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n`;\n\nexport const AnalyticsMetric: React.FC<{\n\ttitle?: string;\n\tRightHeaderComponent?: React.ReactElement;\n\ttrends: AnalyticsTrendInterface[];\n\tcontainerStyle?: React.CSSProperties;\n\ttrendStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\ttitleSize?: 'large' \| 'small';\n\ttitleColor?: string;\n\tperRow?: number;\n\tisLoading?: boolean;\n\thideHeaderDiv?: boolean;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n}> = ({\n\ttitle,\n\ttrends,\n\tRightHeaderComponent,\n\tcontainerStyle,\n\ttitleSize,\n\ttitleColor,\n\tperRow,\n\tisLoading,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\thideHeaderDiv,\n\tisInternationalStore,\n}) => {\n\tconst Typo = titleSize === 'large' ? TitleMedium : TitleRegular;\n\tconst perRowLocal =\n\t\tperRow \|\|\n\t\t(trends.length <= 4 ? trends.length : trends.length % 3 == 0 ? 3 : 4);\n\tconst rows = Math.ceil(trends.length / perRowLocal);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpaddingTop: 24,\n\t\t\t\tpaddingBottom: 24,\n\t\t\t\t...(containerStyle ?? {}),\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\tpaddingBottom: hideHeaderDiv ? 0 : 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{title && (\n\t\t\t\t\t<Typo\n\t\t\t\t\t\tcolor={titleColor ?? COLORS.content.secondary}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpaddingLeft: 24,\n\t\t\t\t\t\t\tpaddingRight: 24,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typo>\n\t\t\t\t)}\n\t\t\t\t{RightHeaderComponent}\n\t\t\t</div>\n\t\t\t<TrendContainer>\n\t\t\t\t{Array.from({ length: rows }).map((_, rowIndex) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tmarginTop: rowIndex === 0 ? 0 : 16,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={rowIndex}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{trends\n\t\t\t\t\t\t\t\t.slice(rowIndex * perRowLocal, (rowIndex + 1) * perRowLocal)\n\t\t\t\t\t\t\t\t.map((trend, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth: trends.length === 1 ? '100%' : '50%',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AnalyticsTrend\n\t\t\t\t\t\t\t\t\t\t\t{...trend}\n\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\t\t\t\t\tcard={false}\n\t\t\t\t\t\t\t\t\t\t\tsize={trend.size ?? 'small'}\n\t\t\t\t\t\t\t\t\t\t\trightSeparator={\n\t\t\t\t\t\t\t\t\t\t\t\ti + rowIndex * perRowLocal <\n\t\t\t\t\t\t\t\t\t\t\t\tMath.min(\n\t\t\t\t\t\t\t\t\t\t\t\t\t(rowIndex + 1) * perRowLocal - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttrends.length - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ttrendStyle={trendStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendContainerStyle={trendContainerStyle}\n\t\t\t\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t))}\n\t\t\t</TrendContainer>\n\t\t</div>\n\t);\n};\n\n/\n Card < 4 => x x x x x x x x x x\n Card % 3 =>\n x x x x x x x x x\n x x x x x\n x\n else perRow => 2\n x x x x x x\n x x x x x\n x\n else\n x x x x x x x x x x x x x x x\n x x x x x x\n/\n"],"names":["TrendContainer","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","AnalyticsMetric","title","trends","RightHeaderComponent","containerStyle","titleSize","titleColor","perRow","isLoading","trendStyle","trendContainerStyle","trendIconStyle","hideHeaderDiv","isInternationalStore","Typo","TitleMedium","TitleRegular","perRowLocal","length","rows","Math","ceil","_jsxs","Object","assign","style","paddingTop","paddingBottom","children","display","flexDirection","justifyContent","_jsx","color","COLORS","content","secondary","paddingLeft","paddingRight","Array","from","_","rowIndex","_Fragment","width","marginTop","slice","trend","i","flex","maxWidth","AnalyticsTrend","card","size","_a","rightSeparator","min"],"mappings":"iRAMA,MAAMA,EAAcC,EAAA,MAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAC,OAAA,aAAA,CAAAA,OAAA,YAAAC,MAAA,kBAAAL,CAAA,eAAAC,QAAAC,IAAAC,SAAA,CAAAG,KAAA,SAAAC,OAAA,kDAAA,CAAAD,KAAA,SAAAC,OAAA,iDAAAC,IAAA,kuIAAAC,+PAMPC,EAeRA,EACJC,QACAC,SACAC,uBACAC,iBACAC,YACAC,aACAC,SACAC,YACAC,aACAC,sBACAC,iBACAC,gBACAC,2BAEA,MAAMC,EAAqB,UAAdT,EAAwBU,EAAcC,EAC7CC,EACLV,IACCL,EAAOgB,QAAU,EAAIhB,EAAOgB,OAAShB,EAAOgB,OAAS,GAAK,EAAI,EAAI,GAC9DC,EAAOC,KAAKC,KAAKnB,EAAOgB,OAASD,GAEvC,OACCK,EACC,MAAAC,OAAAC,OAAA,CAAAC,MACCF,OAAAC,OAAA,CAAAE,WAAY,GACZC,cAAe,IACXvB,QAAAA,EAAkB,KAAG,CAAAwB,SAAA,CAG1BN,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNI,QAAS,OACTC,cAAe,MACfC,eAAgB,gBAChBJ,cAAef,EAAgB,EAAI,KAGnC,CAAAgB,SAAA,CAAA3B,GACA+B,EAAClB,EACAS,OAAAC,OAAA,CAAAS,MAAO3B,QAAAA,EAAc4B,EAAOC,QAAQC,UACpCX,MAAO,CACNY,YAAa,GACbC,aAAc,KACd,CAAAV,SAEA3B,KAGFE,MAEF6B,EAAC3C,YACCkD,MAAMC,KAAK,CAAEtB,OAAQC,IAAQrB,KAAI,CAAC2C,EAAGC,IACrCV,EACCW,EAAA,CAAAf,SAAAI,EAAA,MAAAT,OAAAC,OAAA,CACCC,MAAO,CACNI,QAAS,OACTe,MAAO,OACPC,UAAwB,IAAbH,EAAiB,EAAI,KAChC,CAAAd,SAGA1B,EACC4C,MAAMJ,EAAWzB,GAAcyB,EAAW,GAAKzB,GAC/CnB,KAAI,CAACiD,EAAOC,WAAM,OAClBhB,EACC,MAAAT,OAAAC,OAAA,CAAAC,MAAO,CACNwB,KAAM,EACNC,SAA4B,IAAlBhD,EAAOgB,OAAe,OAAS,QACzC,CAAAU,SAGDI,EAACmB,EACI5B,OAAAC,OAAA,CAAA,EAAAuB,EACJ,CAAAvC,UAAWA,EACX4C,MAAM,EACNC,KAAgB,QAAVC,EAAAP,EAAMM,YAAI,IAAAC,EAAAA,EAAI,QACpBC,eACCP,EAAIN,EAAWzB,EACfG,KAAKoC,KACHd,EAAW,GAAKzB,EAAc,EAC/Bf,EAAOgB,OAAS,GAGlBT,WAAYA,EACZE,eAAgBA,EAChBD,oBAAqBA,EACrBG,qBAAsBA,OAjBlBmC,EAmBA,MA7BHN,YAmCJ"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{createElement as r}from"react";import{AnalyticsChip as e}from"./AnalyticsChip.js";import{AnalyticsMultiWrapper as i}from"./CommonStyles.js";const m=m=>{let{chipDetails:o,wrapperStyle:s}=m;return t(i,Object.assign({style:null!=s?s:{}},{children:o.map(((t,i)=>r(e,Object.assign({},t,{key:i+"_chip"}))))}))};export{m as AnalyticsMultiChip};
+import{jsx as t}from"react/jsx-runtime";import{createElement as r}from"react";import{AnalyticsChip as e}from"./AnalyticsChip.js";import{AnalyticsMultiWrapper as i}from"./CommonStyles.js";const m=({chipDetails:m,wrapperStyle:o})=>t(i,Object.assign({style:null!=o?o:{}},{children:m.map(((t,i)=>r(e,Object.assign({},t,{key:i+"_chip"}))))}));export{m as AnalyticsMultiChip};
 //# sourceMappingURL=AnalyticsMultiChip.js.map

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsMultiChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.tsx"],"sourcesContent":["import React from 'react';\nimport { AnalyticsChip } from './AnalyticsChip';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsMultiWrapper } from './CommonStyles';\n\nexport const AnalyticsMultiChip: React.FC<{\n\tchipDetails: AnalyticsChipInterface[];\n\twrapperStyle?: React.CSSProperties;\n}> = ({ chipDetails, wrapperStyle }) => {\n\treturn (\n\t\t<AnalyticsMultiWrapper style={wrapperStyle ?? {}}>\n\t\t\t{chipDetails.map((eachChip, index) => (\n\t\t\t\t<AnalyticsChip {...eachChip} key={index + '_chip'} />\n\t\t\t))}\n\t\t</AnalyticsMultiWrapper>\n\t);\n};\n"],"names":["AnalyticsMultiChip","~~_ref","~~chipDetails","wrapperStyle","_jsx","AnalyticsMultiWrapper","style","children","map","eachChip","index","_createElement","AnalyticsChip","key"],"mappings":"~~2LAKaA~~,~~MAAAA~~,~~EAGRC~~,~~IAAkC~~,~~IAAjCC~~,~~YAAEA~~,~~EAAWC,aAAEA,GAAcF,EAClC,OACCG,~~EAACC,iBAAsBC,MAAOH,QAAAA,EAAgB,CAAE,GAAA,CAAAI,SAC9CL,EAAYM,KAAI,CAACC,EAAUC,IAC3BC,EAACC,mBAAkBH,EAAQ,CAAEI,IAAKH,EAAQ~~,eAEpB~~"}
1	+ {"version":3,"file":"AnalyticsMultiChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.tsx"],"sourcesContent":["import React from 'react';\nimport { AnalyticsChip } from './AnalyticsChip';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsMultiWrapper } from './CommonStyles';\n\nexport const AnalyticsMultiChip: React.FC<{\n\tchipDetails: AnalyticsChipInterface[];\n\twrapperStyle?: React.CSSProperties;\n}> = ({ chipDetails, wrapperStyle }) => {\n\treturn (\n\t\t<AnalyticsMultiWrapper style={wrapperStyle ?? {}}>\n\t\t\t{chipDetails.map((eachChip, index) => (\n\t\t\t\t<AnalyticsChip {...eachChip} key={index + '_chip'} />\n\t\t\t))}\n\t\t</AnalyticsMultiWrapper>\n\t);\n};\n"],"names":["AnalyticsMultiChip","chipDetails","wrapperStyle","_jsx","AnalyticsMultiWrapper","style","children","map","eachChip","index","_createElement","AnalyticsChip","key"],"mappings":"2LAKO,MAAMA,EAGRA,EAAGC,cAAaC,kBAEnBC,EAACC,iBAAsBC,MAAOH,QAAAA,EAAgB,CAAE,GAAA,CAAAI,SAC9CL,EAAYM,KAAI,CAACC,EAAUC,IAC3BC,EAACC,mBAAkBH,EAAQ,CAAEI,IAAKH,EAAQ"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o}from"react";import{ShimmerComponentStyled as l}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import a from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import c from"../../assets/icons/arrow_down.svg.js";import d from"../../assets/icons/arrow_up.svg.js";import m from"../../assets/icons/info.svg.js";import{Tag as g}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{BodyCaption as p,Caption as y,TitleLarge as u,TitleMedium as b}from"../TypographyStyle.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as j}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as v,IconContainer as x}from"./CommonStyles.js";const T=r=>{let{title:o,value:a,trendPercent:c,type:d="horizontal",timeline:y,customRange:T,tooltip:w,card:O=!0,rightSeparator:$=!1,size:I="big",share:R=!1,formatVal:C,prefixSymbol:D,trailingIcon:L,onTrailIconClick:M,iconTooltipBody:k,funnelPercent:z,isLoading:P,trendRaw:F,trendRawString:N,suffixText:W,trendStyle:_,trendContainerStyle:A,trendIconStyle:B,containerStyle:E,prevTrendDiff:U,relativePercentageDiff:V,isInternationalStore:q,Icon:G,iconContainerStyle:H,tooltipTimelineText:J,customTimelineText:K}=r;const Q="big"===I?u:b,X=void 0!==c?c<0?"negative":0===c?"neutral":"positive":void 0,Y=void 0!==c?R?Math.round(c):Math.abs(Math.round(c)):void 0;return e(v,Object.assign({card:O,style:Object.assign({},E)},{children:t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:G?12:4,borderRightWidth:$?1:0,borderRightColor:s.stroke.primary,borderRightStyle:"solid",paddingLeft:O?0:24,paddingRight:O?0:24,height:"100%",justifyContent:G?"flex-start":"space-between",alignItems:"center"},null!=A?A:{})},{children:[!!G&&e(x,Object.assign({style:Object.assign({},H)},{children:e(G,{})})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=_?_:{})},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(p,Object.assign({style:{color:s.content.secondary}},{children:o})),w&&e(h,Object.assign({body:w,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e(m,{color:s.content.primary,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},R?{justifyContent:"space-between"}:{})},{children:[P&&e(l,{width:108,height:26}),!P&&e(Q,Object.assign({style:{color:s.content.primary}},{children:void 0===a?"--":"number"==typeof a&&C?a>999?q?`${null!=D?D:""}${f(a)} ${null!=W?W:""}`:`${null!=D?D:""}${j(a)} ${null!=W?W:""}`:`${null!=D?D:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(a)} ${null!=W?W:""}`:`${null!=D?D:""}${a} ${null!=W?W:""}`})),"number"==typeof V&&e(g,{tagText:`${V}%`,theme:"light",type:"neutral"}),"horizontal"===d&&!P&&!R&&e(S,{timeline:y,customRange:T,percent:Y,direction:X,trendRaw:F,trendRawString:N,prefixSymbol:D,trendIconStyle:B,isInternationalStore:q,tooltipTimelineText:J,customTimelineText:K}),P&&!R&&"horizontal"===d&&e(l,{height:20,width:141,marginTop:6}),"vertical"===d&&!P&&void 0!==z&&e(g,{tagText:`${z} %`,theme:"light",type:"neutral"}),R&&!P&&void 0!==Y&&e(g,{tagText:`${Y} %`,theme:"light",type:"neutral"}),R||P||!U||0==U?e(i,{}):e(g,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(U),theme:"light",type:"neutral"})]})),"vertical"===d&&!P&&!R&&e("div",Object.assign({style:{marginTop:10}},{children:e(S,{timeline:y,customRange:T,percent:Y,direction:X,trendRaw:F,trendRawString:N,prefixSymbol:D,trendIconStyle:B,isInternationalStore:q,tooltipTimelineText:J,customTimelineText:K})})),P&&"vertical"===d&&e(l,{height:20,width:141,marginTop:6})]})),k&&!P&&e(h,Object.assign({body:k,placement:"right"},{children:L&&e("div",Object.assign({className:"icon--holder",onClick:M},{children:n.createElement(L,{height:20,width:20,color:s.content.secondary})}))}))]}))}))},S=i=>{let{percent:n,direction:l,timeline:m,customRange:g,trendRaw:p,trendRawString:u,prefixSymbol:b,trendIconStyle:v,isInternationalStore:x,tooltipTimelineText:T,customTimelineText:S}=i;const w=()=>{const e=((null!=p?p:0)>0?"+":"")+(null!=b?b:"");return void 0===p?"--":`${null!=e?e:""}${(()=>{let e="--";if(p)return e=String(x?f(Math.abs(p)):j(Math.abs(p))),p<0?"-"+e:e})()}`},[O,$]=r(w()),[I,R]=r(S||"");o((()=>{S||R("today"===m?"vs yesterday":"yesterday"===m?"vs 1 day before":"7 days"===m?"vs last 7 days":"30 days"===m?"vs last 30 days":"custom"===m&&g?a.getAnalyticsCustomDateTimelineText(g):"")}),[m,g]),o((()=>{$(w())}),[p]);const C="negative"===l?c:d,D="negative"===l?s.background.negative.vibrant:"positive"===l?s.background.positive.vibrant:s.content.placeholder;return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof n&&e(C,{color:D,height:16,width:16,style:Object.assign({marginRight:2},null!=v?v:{})}),"number"==typeof n&&l&&t(y,Object.assign({style:{color:D}},{children:["neutral"===l?0:n<1e3?n:">999","%"]})),!!p&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:`(${O})`})),!p&&((null==u?void 0:u.length)||0)>0&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:`${u}`})),m&&(T?e(h,Object.assign({body:T,placement:"bottom"},{children:e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:S||I}))})):e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:S||I})))]}))};export{T as AnalyticsTrend};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o}from"react";import{ShimmerComponentStyled as l}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import a from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import c from"../../assets/icons/arrow_down.svg.js";import d from"../../assets/icons/arrow_up.svg.js";import m from"../../assets/icons/info.svg.js";import{Tag as g}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{BodyCaption as p,Caption as y,TitleLarge as u,TitleMedium as b}from"../TypographyStyle.js";import{truncateValueForInternationalStore as f,truncateValueForIndianStore as j}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as v,IconContainer as x}from"./CommonStyles.js";const T=({title:r,value:o,trendPercent:a,type:c="horizontal",timeline:d,customRange:y,tooltip:T,card:w=!0,rightSeparator:O=!1,size:$="big",share:I=!1,formatVal:R,prefixSymbol:C,trailingIcon:D,onTrailIconClick:L,iconTooltipBody:M,funnelPercent:k,isLoading:z,trendRaw:P,trendRawString:F,suffixText:N,trendStyle:W,trendContainerStyle:_,trendIconStyle:A,containerStyle:B,prevTrendDiff:E,relativePercentageDiff:U,isInternationalStore:V,Icon:q,iconContainerStyle:G,tooltipTimelineText:H,customTimelineText:J})=>{const K="big"===$?u:b,Q=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,X=void 0!==a?I?Math.round(a):Math.abs(Math.round(a)):void 0;return e(v,Object.assign({card:w,style:Object.assign({},B)},{children:t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:q?12:4,borderRightWidth:O?1:0,borderRightColor:s.stroke.primary,borderRightStyle:"solid",paddingLeft:w?0:24,paddingRight:w?0:24,height:"100%",justifyContent:q?"flex-start":"space-between",alignItems:"center"},null!=_?_:{})},{children:[!!q&&e(x,Object.assign({style:Object.assign({},G)},{children:e(q,{})})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=W?W:{})},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(p,Object.assign({style:{color:s.content.secondary}},{children:r})),T&&e(h,Object.assign({body:T,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e(m,{color:s.content.primary,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},I?{justifyContent:"space-between"}:{})},{children:[z&&e(l,{width:108,height:26}),!z&&e(K,Object.assign({style:{color:s.content.primary}},{children:void 0===o?"--":"number"==typeof o&&R?o>999?V?`${null!=C?C:""}${f(o)} ${null!=N?N:""}`:`${null!=C?C:""}${j(o)} ${null!=N?N:""}`:`${null!=C?C:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(o)} ${null!=N?N:""}`:`${null!=C?C:""}${o} ${null!=N?N:""}`})),"number"==typeof U&&e(g,{tagText:`${U}%`,theme:"light",type:"neutral"}),"horizontal"===c&&!z&&!I&&e(S,{timeline:d,customRange:y,percent:X,direction:Q,trendRaw:P,trendRawString:F,prefixSymbol:C,trendIconStyle:A,isInternationalStore:V,tooltipTimelineText:H,customTimelineText:J}),z&&!I&&"horizontal"===c&&e(l,{height:20,width:141,marginTop:6}),"vertical"===c&&!z&&void 0!==k&&e(g,{tagText:`${k} %`,theme:"light",type:"neutral"}),I&&!z&&void 0!==X&&e(g,{tagText:`${X} %`,theme:"light",type:"neutral"}),I||z||!E||0==E?e(i,{}):e(g,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(E),theme:"light",type:"neutral"})]})),"vertical"===c&&!z&&!I&&e("div",Object.assign({style:{marginTop:10}},{children:e(S,{timeline:d,customRange:y,percent:X,direction:Q,trendRaw:P,trendRawString:F,prefixSymbol:C,trendIconStyle:A,isInternationalStore:V,tooltipTimelineText:H,customTimelineText:J})})),z&&"vertical"===c&&e(l,{height:20,width:141,marginTop:6})]})),M&&!z&&e(h,Object.assign({body:M,placement:"right"},{children:D&&e("div",Object.assign({className:"icon--holder",onClick:L},{children:n.createElement(D,{height:20,width:20,color:s.content.secondary})}))}))]}))}))},S=({percent:i,direction:n,timeline:l,customRange:m,trendRaw:g,trendRawString:p,prefixSymbol:u,trendIconStyle:b,isInternationalStore:v,tooltipTimelineText:x,customTimelineText:T})=>{const S=()=>{const e=((null!=g?g:0)>0?"+":"")+(null!=u?u:"");return void 0===g?"--":`${null!=e?e:""}${(()=>{let e="--";if(g)return e=String(v?f(Math.abs(g)):j(Math.abs(g))),g<0?"-"+e:e})()}`},[w,O]=r(S()),[$,I]=r(T||"");o((()=>{T||I("today"===l?"vs yesterday":"yesterday"===l?"vs 1 day before":"7 days"===l?"vs last 7 days":"30 days"===l?"vs last 30 days":"custom"===l&&m?a.getAnalyticsCustomDateTimelineText(m):"")}),[l,m]),o((()=>{O(S())}),[g]);const R="negative"===n?c:d,C="negative"===n?s.background.negative.vibrant:"positive"===n?s.background.positive.vibrant:s.content.placeholder;return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof i&&e(R,{color:C,height:16,width:16,style:Object.assign({marginRight:2},null!=b?b:{})}),"number"==typeof i&&n&&t(y,Object.assign({style:{color:C}},{children:["neutral"===n?0:i<1e3?i:">999","%"]})),!!g&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:`(${w})`})),!g&&((null==p?void 0:p.length)||0)>0&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:`${p}`})),l&&(x?e(h,Object.assign({body:x,placement:"bottom"},{children:e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:T||$}))})):e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:T||$})))]}))};export{T as AnalyticsTrend};
 //# sourceMappingURL=AnalyticsTrend.js.map