@bikdotai/bik-component-library 0.0.814 → 0.0.815

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t:hover {\n\t\t${(props) => {\n\t\t\tif (props.isPreview || !props.needBorder) return '';\n\n\t\t\tconst borderStyle = props.isWhatsappCarousel\n\t\t\t\t? props.hasError\n\t\t\t\t\t? 'dashed'\n\t\t\t\t\t: props.showBorder\n\t\t\t\t\t? 'solid'\n\t\t\t\t\t: 'dashed'\n\t\t\t\t: 'solid';\n\n\t\t\treturn `\n\t\t\t\tborder: 2px ${borderStyle} ${COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`;\n\t\t}}\n\t}\n\n\t.text--template {\n\t\tborder: 2px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 12px;\n\t\tflex: 1;\n\t}\n`;\n\nexport const RCSChatBtnContainer = styled.div`\n\tpadding: 12px 0px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\nexport const RCSMediaContainer = styled.div<{ isHorizontal: boolean }>`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: ${(props) => (props.isHorizontal ? '' : '4px')};\n\twidth: ${(props) => (props.isHorizontal ? '50%' : 'auto')};\n`;\nexport const RCSPdfContainer = styled.div`\n\tborder-radius: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 4px;\n\tbackground-color: #ede7e8;\n\tmargin: 4px;\n\tmax-width: 200px;\n`;\nexport const PdfComineText = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tmargin-left: 4px;\n\tmax-width: 180px;\n`;\nexport const PdfText = styled.p`\n\twhite-space: nowrap;\n\tcolor: #4c5567;\n\tmax-width: 100px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: 0px;\n\tmargin: 0px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tline-width: 20px;\n`;\n\nexport const RCSCarousalContainer = styled.div<{ borderRadius?: string }>`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tposition: relative;\n\theight: 500px;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '8px'};\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\tbackground-color: white;\n`;\n\n/* header  */\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: ${COLORS.background.inactive};\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-bottom: 0px;\n`;\n"],"names":["styled","props","RcsHtmlContainer","COLORS","HeaderTextContainer","TitleTextContainer","RCSPreviewContainer","RCSChatBtnContainer","RCSMediaContainer","RCSPdfContainer","PdfComineText","PdfText","RCSCarousalContainer","HeaderContainer","LeftContainer","IconContainer","TitleContainer","SubTitle"],"mappings":"8JAI4BA,EAAO;AAAA,qBAIbC,GAAWA,EAAM,WAAa,UAAY,OAAQ;AAAA;AAAA;AAAA,WAG5DA,GAAWA,EAAM,WAAa,OAAS,MAAO;AAAA,EAGnD,MAAMC,EAAmBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAInBC,EAAsBJ,EAAOE,CAAgB;AAAA;AAAA;AAAA,EAK7CG,EAAqBL,EAAOE,CAAgB;AAAA;AAAA,EAG5CI,EAAsBN,EAAO;AAAA,eAU3BG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKlBF,GAClBA,EAAM,wBAA0B,MAAQ,QAAQ;AAAA;AAAA,GAE9CA,GACGA,EAAM,WACPA,EAAM,iBACF,sBAAsBE,EAAAA,OAAO,QAAQ,KAAK,IAC9CF,EAAM,SAAiB,qBAAqBE,EAAAA,OAAO,QAAQ,QAAQ,IACnEF,EAAM,WAAmB,qBAAqBE,EAAAA,OAAO,OAAO,KAAK,IAC9D,qBAAqBA,EAAAA,OAAO,OAAO,OAAO,IALnB,eAM9B;AAAA;AAAA;AAAA,IAGGF,GACEA,EAAM,WAAa,CAACA,EAAM,WAAmB,GAU1C;AAAA,kBARaA,EAAM,mBACvBA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OAGuB,IAAIE,SAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7BQ,EAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOrBC,GAAWA,EAAM,aAAe,GAAK,KAAM;AAAA,UACnDA,GAAWA,EAAM,aAAe,MAAQ,MAAO;AAAA,EAE7CQ,EAAkBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzBU,EAAgBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvBW,EAAUX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBY,EAAuBZ,EAAO;AAAA,qBACtBG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIvBF,GAAUA,EAAM,cAAgB,KAAK;AAAA;AAAA;AAAA,EAM3CY,EAAkBb,EAAO;AAAA;AAAA,qBAEjBG,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWlCW,EAAgBd,EAAO;AAAA;AAAA;AAAA;AAAA,EAMvBe,EAAgBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBgB,EAAiBhB,EAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAWjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA"}
+{"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t:hover {\n\t\t${(props) => {\n\t\t\tif (props.isPreview || !props.needBorder) return '';\n\n\t\t\tconst borderStyle = props.isWhatsappCarousel\n\t\t\t\t? props.hasError\n\t\t\t\t\t? 'dashed'\n\t\t\t\t\t: props.showBorder\n\t\t\t\t\t? 'solid'\n\t\t\t\t\t: 'dashed'\n\t\t\t\t: 'solid';\n\n\t\t\treturn `\n\t\t\t\tborder: 2px ${borderStyle} ${COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`;\n\t\t}}\n\t}\n\n\t.text--template {\n\t\tborder: 2px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 12px;\n\t\tflex: 1;\n\t}\n`;\n\nexport const RCSChatBtnContainer = styled.div`\n\tpadding: 12px 0px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\nexport const RCSMediaContainer = styled.div<{ isHorizontal: boolean }>`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: ${(props) => (props.isHorizontal ? '' : '4px')};\n\twidth: ${(props) => (props.isHorizontal ? '50%' : 'auto')};\n`;\nexport const RCSPdfContainer = styled.div`\n\tborder-radius: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 4px;\n\tbackground-color: #ede7e8;\n\tmargin: 4px;\n\tmax-width: 200px;\n`;\nexport const PdfComineText = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tmargin-left: 4px;\n\tmax-width: 180px;\n`;\nexport const PdfText = styled.p`\n\twhite-space: nowrap;\n\tcolor: #4c5567;\n\tmax-width: 100px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: 0px;\n\tmargin: 0px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tline-width: 20px;\n`;\n\nexport const RCSCarousalContainer = styled.div<{ borderRadius?: string }>`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tposition: relative;\n\theight: 500px;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '8px'};\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\tbackground-color: white;\n`;\n\n/* header  */\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: ${COLORS.background.inactive};\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-bottom: 0px;\n`;\n"],"names":["styled","props","RcsHtmlContainer","COLORS","HeaderTextContainer","TitleTextContainer","RCSPreviewContainer","RCSChatBtnContainer","RCSMediaContainer","RCSPdfContainer","PdfComineText","PdfText","RCSCarousalContainer","HeaderContainer","LeftContainer","IconContainer","TitleContainer","SubTitle"],"mappings":"6NAI4BA,EAAAA,QAAO;AAAA,qBAIbC,GAAWA,EAAM,WAAa,UAAY,OAAQ;AAAA;AAAA;AAAA,WAG5DA,GAAWA,EAAM,WAAa,OAAS,MAAO;AAAA,EAGnD,MAAMC,EAAmBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAInBC,EAAsBJ,EAAAA,QAAOE,CAAgB;AAAA;AAAA;AAAA,EAK7CG,EAAqBL,EAAAA,QAAOE,CAAgB;AAAA;AAAA,EAG5CI,EAAsBN,EAAAA,QAAO;AAAA,eAU3BG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKlBF,GAClBA,EAAM,wBAA0B,MAAQ,QAAQ;AAAA;AAAA,GAE9CA,GACGA,EAAM,WACPA,EAAM,iBACF,sBAAsBE,EAAAA,OAAO,QAAQ,KAAK,IAC9CF,EAAM,SAAiB,qBAAqBE,EAAAA,OAAO,QAAQ,QAAQ,IACnEF,EAAM,WAAmB,qBAAqBE,EAAAA,OAAO,OAAO,KAAK,IAC9D,qBAAqBA,EAAAA,OAAO,OAAO,OAAO,IALnB,eAM9B;AAAA;AAAA;AAAA,IAGGF,GACEA,EAAM,WAAa,CAACA,EAAM,WAAmB,GAU1C;AAAA,kBARaA,EAAM,mBACvBA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OAGuB,IAAIE,SAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAsBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7BQ,EAAoBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOrBC,GAAWA,EAAM,aAAe,GAAK,KAAM;AAAA,UACnDA,GAAWA,EAAM,aAAe,MAAQ,MAAO;AAAA,EAE7CQ,EAAkBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzBU,EAAgBV,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvBW,EAAUX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBY,EAAuBZ,EAAAA,QAAO;AAAA,qBACtBG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIvBF,GAAUA,EAAM,cAAgB,KAAK;AAAA;AAAA;AAAA,EAM3CY,EAAkBb,EAAAA,QAAO;AAAA;AAAA,qBAEjBG,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWlCW,EAAgBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBe,EAAgBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBgB,EAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAWjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA"}

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("styled-components"),n=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),l=require("../utils/getPreviewPropLen.js"),h=require("./RCSChatHeader.js"),r=require("./RCSChatPreview.js"),d=i.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("styled-components"),o=require("../../template-context-mapper/context/templateModalContext.js"),s=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),d=require("../utils/getPreviewPropLen.js"),h=require("./RCSChatHeader.js"),r=require("./RCSChatPreview.js"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=u(n),c=a.default.div`
 	background-color: white;
 	border-radius: 4px;
 	position: relative;
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
-`,u=i(s.TitleRegular)`
-	color: ${o.COLORS.content.primary};
-`,c=e=>{const{hideDeviceContainerInPreview:a}=n.useTemplateModalContext();return l.getPreviewPropLen(e)===3?t.jsx(t.Fragment,{children:e.zeroStateComponent}):a?t.jsx(r.RCSChatPreview,{showHeader:e.showHeader,...e}):t.jsx(t.Fragment,{children:t.jsxs(d,{style:e.containerStyle,showHeader:e.showHeader,isWhatsappCarousel:e.isWhatsappCarousel,children:[e.showHeader&&t.jsx(h.default,{}),t.jsxs("div",{style:{padding:e.size==="small"?"10px 32px 10px 10px":`10px ${e.isWhatsappCarousel?"0px":"12px"} ${e.isWhatsappCarousel?"2px":"16px"} 16px`,height:e.isWhatsappCarousel?"100%":"auto"},children:[!e.hidePreviewText&&t.jsx("div",{style:{marginBottom:16},children:t.jsx(u,{children:"Preview"})}),t.jsx(r.RCSChatPreview,{showHeader:e.showHeader,...e})]})]})})};exports.RCSTemplateLikePreview=c;
+`,x=a.default(s.TitleRegular)`
+	color: ${l.COLORS.content.primary};
+`,C=e=>{const{hideDeviceContainerInPreview:i}=o.useTemplateModalContext();return d.getPreviewPropLen(e)===3?t.jsx(t.Fragment,{children:e.zeroStateComponent}):i?t.jsx(r.RCSChatPreview,{showHeader:e.showHeader,...e}):t.jsx(t.Fragment,{children:t.jsxs(c,{style:e.containerStyle,showHeader:e.showHeader,isWhatsappCarousel:e.isWhatsappCarousel,children:[e.showHeader&&t.jsx(h.default,{}),t.jsxs("div",{style:{padding:e.size==="small"?"10px 32px 10px 10px":`10px ${e.isWhatsappCarousel?"0px":"12px"} ${e.isWhatsappCarousel?"2px":"16px"} 16px`,height:e.isWhatsappCarousel?"100%":"auto"},children:[!e.hidePreviewText&&t.jsx("div",{style:{marginBottom:16},children:t.jsx(x,{children:"Preview"})}),t.jsx(r.RCSChatPreview,{showHeader:e.showHeader,...e})]})]})})};exports.RCSTemplateLikePreview=C;
 //# sourceMappingURL=RCSTemplateLikePreview.js.map

package/dist/cjs/components/template-preview/RCS/RCSTemplateLikePreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"RCSTemplateLikePreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSTemplateLikePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { getPreviewPropLen } from '../utils/getPreviewPropLen';\nimport RCSChatHeader from './RCSChatHeader';\nimport { RCSChatPreview } from './RCSChatPreview';\n\nconst Container = styled.div<{\n\tshowHeader?: boolean;\n\tisWhatsappCarousel?: boolean;\n}>`\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n`;\n\nconst PreviewText = styled(TitleRegular)`\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const RCSTemplateLikePreview: React.FC<RCSPreviewPropsV2> = (props) => {\n\tconst { hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst propLength = getPreviewPropLen(props);\n\tif (propLength === 3) {\n\t\treturn <>{props.zeroStateComponent}</>;\n\t}\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn <RCSChatPreview showHeader={props.showHeader} {...props} />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Container\n\t\t\t\tstyle={props.containerStyle}\n\t\t\t\tshowHeader={props.showHeader}\n\t\t\t\tisWhatsappCarousel={props.isWhatsappCarousel}\n\t\t\t>\n\t\t\t\t{props.showHeader && <RCSChatHeader />}\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding:\n\t\t\t\t\t\t\tprops.size === 'small'\n\t\t\t\t\t\t\t\t? '10px 32px 10px 10px'\n\t\t\t\t\t\t\t\t: `10px ${props.isWhatsappCarousel ? '0px' : '12px'} ${\n\t\t\t\t\t\t\t\t\t\tprops.isWhatsappCarousel ? '2px' : '16px'\n\t\t\t\t\t\t\t\t  } 16px`,\n\t\t\t\t\t\theight: props.isWhatsappCarousel ? '100%' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{!props.hidePreviewText && (\n\t\t\t\t\t\t<div style={{ marginBottom: 16 }}>\n\t\t\t\t\t\t\t<PreviewText>Preview</PreviewText>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<RCSChatPreview showHeader={props.showHeader} {...props} />\n\t\t\t\t</div>\n\t\t\t</Container>\n\t\t</>\n\t);\n};\n"],"names":["Container","styled","props","PreviewText","TitleRegular","COLORS","RCSTemplateLikePreview","hideDeviceContainerInPreview","useTemplateModalContext","getPreviewPropLen","jsx","Fragment","RCSChatPreview","jsxs","RCSChatHeader"],"mappings":"0ZAUMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA,WAObC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA,EAG5DC,EAAcF,EAAOG,cAAY;AAAA,UAC7BC,EAAAA,OAAO,QAAQ,OAAO;AAAA,EAGnBC,EAAuDJ,GAAU,CAC7E,KAAM,CAAE,6BAAAK,CAAA,EAAiCC,0BAAA,EAGzC,OADmBC,EAAAA,kBAAkBP,CAAK,IACvB,EACXQ,EAAAA,IAAAC,EAAAA,SAAA,CAAG,WAAM,kBAAA,CAAmB,EAGhCJ,QACKK,EAAAA,eAAA,CAAe,WAAYV,EAAM,WAAa,GAAGA,EAAO,EAIhEQ,MAAAC,EAAAA,SAAA,CACC,SAAAE,EAAAA,KAACb,EAAA,CACA,MAAOE,EAAM,eACb,WAAYA,EAAM,WAClB,mBAAoBA,EAAM,mBAEzB,SAAA,CAAAA,EAAM,kBAAeY,EAAAA,QAAA,CAAA,CAAc,EAEpCD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QACCX,EAAM,OAAS,QACZ,sBACA,QAAQA,EAAM,mBAAqB,MAAQ,MAAM,IACjDA,EAAM,mBAAqB,MAAQ,MACnC,QACJ,OAAQA,EAAM,mBAAqB,OAAS,MAAA,EAG5C,SAAA,CAAA,CAACA,EAAM,iBACPQ,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,aAAc,EAAA,EAC3B,SAAAA,EAAAA,IAACP,EAAA,CAAY,SAAA,SAAA,CAAO,EACrB,QAEAS,EAAAA,eAAA,CAAe,WAAYV,EAAM,WAAa,GAAGA,CAAA,CAAO,CAAA,CAAA,CAAA,CAC1D,CAAA,CAAA,EAEF,CAEF"}
+{"version":3,"file":"RCSTemplateLikePreview.js","sources":["../../../../../src/components/template-preview/RCS/RCSTemplateLikePreview.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCSPreviewPropsV2 } from '../models/RCSTemplate';\nimport { getPreviewPropLen } from '../utils/getPreviewPropLen';\nimport RCSChatHeader from './RCSChatHeader';\nimport { RCSChatPreview } from './RCSChatPreview';\n\nconst Container = styled.div<{\n\tshowHeader?: boolean;\n\tisWhatsappCarousel?: boolean;\n}>`\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n`;\n\nconst PreviewText = styled(TitleRegular)`\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const RCSTemplateLikePreview: React.FC<RCSPreviewPropsV2> = (props) => {\n\tconst { hideDeviceContainerInPreview } = useTemplateModalContext();\n\n\tconst propLength = getPreviewPropLen(props);\n\tif (propLength === 3) {\n\t\treturn <>{props.zeroStateComponent}</>;\n\t}\n\n\tif (hideDeviceContainerInPreview) {\n\t\treturn <RCSChatPreview showHeader={props.showHeader} {...props} />;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Container\n\t\t\t\tstyle={props.containerStyle}\n\t\t\t\tshowHeader={props.showHeader}\n\t\t\t\tisWhatsappCarousel={props.isWhatsappCarousel}\n\t\t\t>\n\t\t\t\t{props.showHeader && <RCSChatHeader />}\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding:\n\t\t\t\t\t\t\tprops.size === 'small'\n\t\t\t\t\t\t\t\t? '10px 32px 10px 10px'\n\t\t\t\t\t\t\t\t: `10px ${props.isWhatsappCarousel ? '0px' : '12px'} ${\n\t\t\t\t\t\t\t\t\t\tprops.isWhatsappCarousel ? '2px' : '16px'\n\t\t\t\t\t\t\t\t  } 16px`,\n\t\t\t\t\t\theight: props.isWhatsappCarousel ? '100%' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{!props.hidePreviewText && (\n\t\t\t\t\t\t<div style={{ marginBottom: 16 }}>\n\t\t\t\t\t\t\t<PreviewText>Preview</PreviewText>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<RCSChatPreview showHeader={props.showHeader} {...props} />\n\t\t\t\t</div>\n\t\t\t</Container>\n\t\t</>\n\t);\n};\n"],"names":["Container","styled","props","PreviewText","TitleRegular","COLORS","RCSTemplateLikePreview","hideDeviceContainerInPreview","useTemplateModalContext","getPreviewPropLen","jsx","Fragment","RCSChatPreview","jsxs","RCSChatHeader"],"mappings":"ydAUMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAObC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA,EAG5DC,EAAcF,EAAAA,QAAOG,cAAY;AAAA,UAC7BC,EAAAA,OAAO,QAAQ,OAAO;AAAA,EAGnBC,EAAuDJ,GAAU,CAC7E,KAAM,CAAE,6BAAAK,CAAA,EAAiCC,0BAAA,EAGzC,OADmBC,EAAAA,kBAAkBP,CAAK,IACvB,EACXQ,EAAAA,IAAAC,EAAAA,SAAA,CAAG,WAAM,kBAAA,CAAmB,EAGhCJ,QACKK,EAAAA,eAAA,CAAe,WAAYV,EAAM,WAAa,GAAGA,EAAO,EAIhEQ,MAAAC,EAAAA,SAAA,CACC,SAAAE,EAAAA,KAACb,EAAA,CACA,MAAOE,EAAM,eACb,WAAYA,EAAM,WAClB,mBAAoBA,EAAM,mBAEzB,SAAA,CAAAA,EAAM,kBAAeY,EAAAA,QAAA,CAAA,CAAc,EAEpCD,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QACCX,EAAM,OAAS,QACZ,sBACA,QAAQA,EAAM,mBAAqB,MAAQ,MAAM,IACjDA,EAAM,mBAAqB,MAAQ,MACnC,QACJ,OAAQA,EAAM,mBAAqB,OAAS,MAAA,EAG5C,SAAA,CAAA,CAACA,EAAM,iBACPQ,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,aAAc,EAAA,EAC3B,SAAAA,EAAAA,IAACP,EAAA,CAAY,SAAA,SAAA,CAAO,EACrB,QAEAS,EAAAA,eAAA,CAAe,WAAYV,EAAM,WAAa,GAAGA,CAAA,CAAO,CAAA,CAAA,CAAA,CAC1D,CAAA,CAAA,EAEF,CAEF"}

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../../../assets/icons/union.svg.js"),t=require("styled-components"),i=require("../../../constants/Theme.js"),n=t.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),u=require("../../../assets/icons/union.svg.js"),a=require("styled-components"),o=require("../../../constants/Theme.js"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=l(a),i=n.default.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`,o=t.div`
+`,r=n.default.div`
 	padding: 12px;
-	background: ${i.COLORS.background.base};
+	background: ${o.COLORS.background.base};
 	border-radius: 16px;
 	position: relative;
-`,a=r=>{const{content:s,size:d}=r;return e.jsxs(o,{children:[e.jsx(n,{children:e.jsx(u.default,{color:i.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:d==="small"?12:14},dangerouslySetInnerHTML:{__html:s}})]})};exports.SMSContainer=o;exports.SideCaret=n;exports.default=a;
+`,c=e=>{const{content:s,size:d}=e;return t.jsxs(r,{children:[t.jsx(i,{children:t.jsx(u.default,{color:o.COLORS.background.base,height:27,width:27})}),t.jsx("div",{style:{fontSize:d==="small"?12:14},dangerouslySetInnerHTML:{__html:s}})]})};exports.SMSContainer=r;exports.SideCaret=i;exports.default=c;
 //# sourceMappingURL=SMSBubble.js.map

package/dist/cjs/components/template-preview/SMS/SMSBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"SMSBubble.js","sources":["../../../../../src/components/template-preview/SMS/SMSBubble.tsx"],"sourcesContent":["import UnionIcon from '@src/assets/icons/union.svg';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tleft: -10px;\n\tbottom: -1px;\n`;\nexport const SMSContainer = styled.div`\n\tpadding: 12px;\n\tbackground: ${COLORS.background.base};\n\tborder-radius: 16px;\n\tposition: relative;\n`;\n\nexport type SMSBubbleProps = {\n\tcontent: string;\n\tsize?: 'small' | 'large';\n};\n\nconst SMSBubble = (props: SMSBubbleProps) => {\n\tconst { content, size } = props;\n\treturn (\n\t\t<SMSContainer>\n\t\t\t<SideCaret>\n\t\t\t\t<UnionIcon color={COLORS.background.base} height={27} width={27} />\n\t\t\t</SideCaret>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize: size === 'small' ? 12 : 14,\n\t\t\t\t}}\n\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t__html: content,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SMSContainer>\n\t);\n};\n\nexport default SMSBubble;\n"],"names":["SideCaret","styled","SMSContainer","COLORS","SMSBubble","props","content","size","jsx","UnionIcon"],"mappings":"yQAIaA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnBC,EAAeD,EAAO;AAAA;AAAA,eAEpBE,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,EAU/BC,EAAaC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,KAAAC,CAAA,EAASF,EAC1B,cACEH,EAAA,CACA,SAAA,CAAAM,EAAAA,IAACR,EAAA,CACA,SAAAQ,EAAAA,IAACC,EAAAA,QAAA,CAAU,MAAON,EAAAA,OAAO,WAAW,KAAM,OAAQ,GAAI,MAAO,EAAA,CAAI,EAClE,EACAK,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAUD,IAAS,QAAU,GAAK,EAAA,EAEnC,wBAAyB,CACxB,OAAQD,CAAA,CACT,CAAA,CACD,EACD,CAEF"}
+{"version":3,"file":"SMSBubble.js","sources":["../../../../../src/components/template-preview/SMS/SMSBubble.tsx"],"sourcesContent":["import UnionIcon from '@src/assets/icons/union.svg';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tleft: -10px;\n\tbottom: -1px;\n`;\nexport const SMSContainer = styled.div`\n\tpadding: 12px;\n\tbackground: ${COLORS.background.base};\n\tborder-radius: 16px;\n\tposition: relative;\n`;\n\nexport type SMSBubbleProps = {\n\tcontent: string;\n\tsize?: 'small' | 'large';\n};\n\nconst SMSBubble = (props: SMSBubbleProps) => {\n\tconst { content, size } = props;\n\treturn (\n\t\t<SMSContainer>\n\t\t\t<SideCaret>\n\t\t\t\t<UnionIcon color={COLORS.background.base} height={27} width={27} />\n\t\t\t</SideCaret>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tfontSize: size === 'small' ? 12 : 14,\n\t\t\t\t}}\n\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t__html: content,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SMSContainer>\n\t);\n};\n\nexport default SMSBubble;\n"],"names":["SideCaret","styled","SMSContainer","COLORS","SMSBubble","props","content","size","jsx","UnionIcon"],"mappings":"wUAIaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnBC,EAAeD,EAAAA,QAAO;AAAA;AAAA,eAEpBE,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,EAU/BC,EAAaC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,KAAAC,CAAA,EAASF,EAC1B,cACEH,EAAA,CACA,SAAA,CAAAM,EAAAA,IAACR,EAAA,CACA,SAAAQ,EAAAA,IAACC,EAAAA,QAAA,CAAU,MAAON,EAAAA,OAAO,WAAW,KAAM,OAAQ,GAAI,MAAO,EAAA,CAAI,EAClE,EACAK,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAUD,IAAS,QAAU,GAAK,EAAA,EAEnC,wBAAyB,CACxB,OAAQD,CAAA,CACT,CAAA,CACD,EACD,CAEF"}

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.js

@@ -1,47 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js");e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),d=require("../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(r);t.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -5px;
 	bottom: 2px;
-`;const o=e.div`
-	padding: ${d=>d.size==="small"?"12px 32px 12px 12px":"16px 56px 12px 16px"};
-	background: ${r.COLORS.surface.standard};
+`;const a=t.default.div`
+	padding: ${e=>e.size==="small"?"12px 32px 12px 12px":"16px 56px 12px 16px"};
+	background: ${d.COLORS.surface.standard};
 	border-radius: 4px;
-`,t=e.div`
+`,i=t.default.div`
 	padding: 16px;
-	background: ${r.COLORS.surface.standard};
+	background: ${d.COLORS.surface.standard};
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
-`;e.div`
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border-bottom: 1px solid ${d.COLORS.stroke.primary};
+`;t.default.div`
+	border: 1px solid ${d.COLORS.stroke.primary};
 	height: 100%;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-`;e.div`
-	margin-top: ${d=>d.hideHeader?0:"16px"};
+`;t.default.div`
+	margin-top: ${e=>e.hideHeader?0:"16px"};
 	border-radius: 4px;
-	border-color: ${r.COLORS.stroke.primary};
-	border-width: ${d=>d.outsidePreview?0:"1px"};
-`;e.div`
+	border-color: ${d.COLORS.stroke.primary};
+	border-width: ${e=>e.outsidePreview?0:"1px"};
+`;t.default.div`
 	position: absolute;
 	width: 30px;
 	height: 30px;
 	left: -10px;
 	bottom: -1px;
-`;e.div`
+`;t.default.div`
 	padding: 12px;
-	background: ${r.COLORS.background.base};
+	background: ${d.COLORS.background.base};
 	border-radius: 16px;
-`;const i=e.div`
+`;const p=t.default.div`
 	padding: 10px;
 	position: sticky;
 	top: 0;
 	z-index: 1;
-	background: ${r.COLORS.surface.standard};
+	background: ${d.COLORS.surface.standard};
 	display: flex;
 	justify-content: space-between;
-	border-bottom: 1px solid ${r.COLORS.background.base};
-`;exports.SMSBubbleContainer=o;exports.SMSCardHeader=t;exports.SMSHeader=i;
+	border-bottom: 1px solid ${d.COLORS.background.base};
+`;exports.SMSBubbleContainer=a;exports.SMSCardHeader=i;exports.SMSHeader=p;
 //# sourceMappingURL=SmsTemplatePreview.styled.js.map

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmsTemplatePreview.styled.js","sources":["../../../../src/components/template-preview/SmsTemplatePreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -5px;\n\tbottom: 2px;\n`;\n\nexport const SMSBubbleContainer = styled.div<{ size?: 'small' | 'large' }>`\n\tpadding: ${(props) =>\n\t\tprops.size === 'small' ? '12px 32px 12px 12px' : '16px 56px 12px 16px'};\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n`;\n\nexport const SMSCardHeader = styled.div`\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: 4px;\n\tborder-top-right-radius: 4px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SMSContainer = styled.div`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\theight: 100%;\n\tborder-top-left-radius: 4px;\n\tborder-top-right-radius: 4px;\n`;\n\nexport const SMSInnerContainer = styled.div<{\n\thideHeader?: boolean;\n\toutsidePreview?: boolean;\n}>`\n\tmargin-top: ${(props) => (props.hideHeader ? 0 : '16px')};\n\tborder-radius: 4px;\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-width: ${(props) => (props.outsidePreview ? 0 : '1px')};\n`;\n\nexport const BubbleSideCaret = styled.div`\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tleft: -10px;\n\tbottom: -1px;\n`;\n\nexport const BubbleContainer = styled.div`\n\tpadding: 12px;\n\tbackground: ${COLORS.background.base};\n\tborder-radius: 16px;\n`;\n\nexport const SMSHeader = styled.div`\n\tpadding: 10px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 1;\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tborder-bottom: 1px solid ${COLORS.background.base};\n`;\n"],"names":["styled","SMSBubbleContainer","props","COLORS","SMSCardHeader","SMSHeader"],"mappings":"2JAGyBA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQzB,MAAMC,EAAqBD,EAAO;AAAA,YAC5BE,GACXA,EAAM,OAAS,QAAU,sBAAwB,qBAAqB;AAAA,eACzDC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIzBC,EAAgBJ,EAAO;AAAA;AAAA,eAErBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,4BAGVA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGrBH,EAAO;AAAA,qBACdG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMTH,EAAO;AAAA,eAIxBE,GAAWA,EAAM,WAAa,EAAI,MAAO;AAAA;AAAA,iBAExCC,EAAAA,OAAO,OAAO,OAAO;AAAA,iBACpBD,GAAWA,EAAM,eAAiB,EAAI,KAAM;AAAA,EAG/BF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQPA,EAAO;AAAA;AAAA,eAEvBG,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,EAI9B,MAAME,EAAYL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,4BAGVA,EAAAA,OAAO,WAAW,IAAI;AAAA"}
+{"version":3,"file":"SmsTemplatePreview.styled.js","sources":["../../../../src/components/template-preview/SmsTemplatePreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -5px;\n\tbottom: 2px;\n`;\n\nexport const SMSBubbleContainer = styled.div<{ size?: 'small' | 'large' }>`\n\tpadding: ${(props) =>\n\t\tprops.size === 'small' ? '12px 32px 12px 12px' : '16px 56px 12px 16px'};\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n`;\n\nexport const SMSCardHeader = styled.div`\n\tpadding: 16px;\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: 4px;\n\tborder-top-right-radius: 4px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const SMSContainer = styled.div`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\theight: 100%;\n\tborder-top-left-radius: 4px;\n\tborder-top-right-radius: 4px;\n`;\n\nexport const SMSInnerContainer = styled.div<{\n\thideHeader?: boolean;\n\toutsidePreview?: boolean;\n}>`\n\tmargin-top: ${(props) => (props.hideHeader ? 0 : '16px')};\n\tborder-radius: 4px;\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-width: ${(props) => (props.outsidePreview ? 0 : '1px')};\n`;\n\nexport const BubbleSideCaret = styled.div`\n\tposition: absolute;\n\twidth: 30px;\n\theight: 30px;\n\tleft: -10px;\n\tbottom: -1px;\n`;\n\nexport const BubbleContainer = styled.div`\n\tpadding: 12px;\n\tbackground: ${COLORS.background.base};\n\tborder-radius: 16px;\n`;\n\nexport const SMSHeader = styled.div`\n\tpadding: 10px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 1;\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tborder-bottom: 1px solid ${COLORS.background.base};\n`;\n"],"names":["styled","SMSBubbleContainer","props","COLORS","SMSCardHeader","SMSHeader"],"mappings":"0NAGyBA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQzB,MAAMC,EAAqBD,EAAAA,QAAO;AAAA,YAC5BE,GACXA,EAAM,OAAS,QAAU,sBAAwB,qBAAqB;AAAA,eACzDC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIzBC,EAAgBJ,EAAAA,QAAO;AAAA;AAAA,eAErBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,4BAGVA,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGrBH,EAAAA,QAAO;AAAA,qBACdG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAMTH,EAAAA,QAAO;AAAA,eAIxBE,GAAWA,EAAM,WAAa,EAAI,MAAO;AAAA;AAAA,iBAExCC,EAAAA,OAAO,OAAO,OAAO;AAAA,iBACpBD,GAAWA,EAAM,eAAiB,EAAI,KAAM;AAAA,EAG/BF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQPA,EAAAA,QAAO;AAAA;AAAA,eAEvBG,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,EAI9B,MAAME,EAAYL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,4BAGVA,EAAAA,OAAO,WAAW,IAAI;AAAA"}

package/dist/cjs/components/template-preview/TemplatePreview.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),e=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=i(e),o=n.default.div`
 	position: absolute;
 	top: 0;
 	right: 30px;
@@ -8,5 +8,5 @@
 	width: 48px;
 	height: 48px;
 	z-index: 4;
-`;exports.AiContentBadge=e;
+`;exports.AiContentBadge=o;
 //# sourceMappingURL=TemplatePreview.styled.js.map

package/dist/cjs/components/template-preview/TemplatePreview.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"TemplatePreview.styled.js","sources":["../../../../src/components/template-preview/TemplatePreview.styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const AiContentBadge = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tright: 30px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 48px;\n\theight: 48px;\n\tz-index: 4;\n`;\n"],"names":["AiContentBadge","styled"],"mappings":"qHAEaA,EAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"TemplatePreview.styled.js","sources":["../../../../src/components/template-preview/TemplatePreview.styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const AiContentBadge = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tright: 30px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 48px;\n\theight: 48px;\n\tz-index: 4;\n`;\n"],"names":["AiContentBadge","styled"],"mappings":"oLAEaA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=require("../../../constants/Theme.js"),n=e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),i=require("../../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(n),a=t.default.div`
 	height: 50px;
 	background-color: #008069;
 	position: sticky;
@@ -9,11 +9,11 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: 5px;
-`,i=e.div`
+`,l=t.default.div`
 	display: flex;
 	align-items: center;
 	gap: 5px;
-`,o=e.div`
+`,r=t.default.div`
 	height: 27px;
 	width: 27px;
 	border-radius: 15px;
@@ -22,17 +22,17 @@
 	justify-content: center;
 	align-items: center;
 	gap: 6px;
-`,r=e.div`
+`,d=t.default.div`
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-`,a=e.p`
+`,c=t.default.p`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 8px;
 	line-height: 11px;
-	color: ${t.COLORS.content.primaryInverse};
+	color: ${i.COLORS.content.primaryInverse};
 	margin-bottom: 0px;
-`;exports.HeaderContainer=n;exports.IconContainer=o;exports.LeftContainer=i;exports.SubTitle=a;exports.TitleContainer=r;
+`;exports.HeaderContainer=a;exports.IconContainer=r;exports.LeftContainer=l;exports.SubTitle=c;exports.TitleContainer=d;
 //# sourceMappingURL=ChatHeader.style.js.map

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatHeader.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatHeader.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: #008069;\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.primaryInverse};\n\tmargin-bottom: 0px;\n`;\n"],"names":["HeaderContainer","styled","LeftContainer","IconContainer","TitleContainer","SubTitle","COLORS"],"mappings":"8JAGaA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAazBC,EAAgBD,EAAO;AAAA;AAAA;AAAA;AAAA,EAMvBE,EAAgBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBG,EAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA,EAMxBI,EAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBK,EAAAA,OAAO,QAAQ,cAAc;AAAA;AAAA"}
+{"version":3,"file":"ChatHeader.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatHeader.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: #008069;\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.primaryInverse};\n\tmargin-bottom: 0px;\n`;\n"],"names":["HeaderContainer","styled","LeftContainer","IconContainer","TitleContainer","SubTitle","COLORS"],"mappings":"6NAGaA,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAazBC,EAAgBD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBE,EAAgBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBG,EAAiBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBI,EAAWJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBK,EAAAA,OAAO,QAAQ,cAAc;AAAA;AAAA"}

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),M=require("../../../assets/icons/halfRectangle.svg.js"),b=require("../../../assets/icons/phone.svg.js"),A=require("../../../assets/icons/RedirectToNew.svg.js"),N=require("react"),_=require("styled-components"),d=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),v=require("../helpers/WhatsAppFormatToHTML.js"),r=require("../models/TemplateMeta.js"),x=require("./ChatBtn.js"),i=require("./ChatUI.style.js"),R=require("./MediaCard.js"),P=require("./RenderTemplateWithVariable.js"),H=require("../../tooltips/Tooltip.js"),O=_.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../assets/icons/halfRectangle.svg.js"),F=require("../../../assets/icons/phone.svg.js"),M=require("../../../assets/icons/RedirectToNew.svg.js"),A=require("react"),N=require("styled-components"),l=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),v=require("../helpers/WhatsAppFormatToHTML.js"),o=require("../models/TemplateMeta.js"),T=require("./ChatBtn.js"),n=require("./ChatUI.style.js"),R=require("./MediaCard.js"),P=require("./RenderTemplateWithVariable.js"),H=require("../../tooltips/Tooltip.js"),O=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},I=O(N),L=I.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -7.7px;
 	top: -8px;
-`,I=T=>{const{bodyText:n,footerText:l,headerMediaType:o,headerText:u,headerAssetLink:m,headerAssetName:y,quickReplybtn:S,ctaBtn:g,actionTypes:c,textType:j,extras:q,showHeader:p,imagePreviewStyles:C,size:E,children:h,isPreview:f}=T,w=new v.WhatsAppFormatToHTML,F=N.useMemo(()=>({color:a.COLORS.content.primary,margin:12,fontSize:p?a.FONTS.caption.fontSize:a.FONTS.bodySecondary.fontSize,fontWeight:a.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"}),[]);return e.jsxs(i.Container,{isPreview:f,children:[e.jsx(O,{children:e.jsx(M.default,{color:"white",height:8,width:8})}),o===r.HEADER_TYPES.TEXT?e.jsx(P.default,{bold:!0,text:u?.replace(/</g,"&lt;").replace(/>/g,"&gt;")}):o!==r.HEADER_TYPES.NONE?e.jsx(R.MediaCard,{headerAssetLink:m,headerAssetName:y,mediaType:o,imagePreviewStyles:o===r.HEADER_TYPES.IMAGE?C:{}}):e.jsx(e.Fragment,{}),!!n&&e.jsx(e.Fragment,{children:h?e.jsx(e.Fragment,{children:h}):e.jsx(e.Fragment,{children:j==="html"?e.jsx("div",{className:"richTextEditor",style:F,dangerouslySetInnerHTML:{__html:w.convertToHTML(n)}}):e.jsx(d.BodySecondary,{children:n?.replace(/</g,"&lt;").replace(/>/g,"&gt;")})})}),e.jsxs(i.FooterWrapper,{children:[e.jsx(H.Tooltip,{body:l??"",placement:"top",children:e.jsx(i.FooterText,{style:{flex:1},children:l})}),e.jsx(i.TimeStamp,{children:"16:48"})]}),c===r.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:S?.map((t,s)=>e.jsx(x.ChatBtn,{text:t.text},s))}):c===r.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:g?.map((t,s)=>e.jsx(x.ChatBtn,{textTypography:p?d.Caption:d.BodySecondary,extraContent:q?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:t.type==="phoneNumber"?b.default:A.default,size:E},s))}):e.jsx(e.Fragment,{})]})};exports.default=I;
+`,W=t=>{const{bodyText:s,footerText:c,headerMediaType:a,headerText:u,headerAssetLink:m,headerAssetName:y,quickReplybtn:S,ctaBtn:g,actionTypes:p,textType:j,extras:f,showHeader:h,imagePreviewStyles:C,size:q,children:x,isPreview:E}=t,_=new v.WhatsAppFormatToHTML,w=A.useMemo(()=>({color:i.COLORS.content.primary,margin:12,fontSize:h?i.FONTS.caption.fontSize:i.FONTS.bodySecondary.fontSize,fontWeight:i.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"}),[]);return e.jsxs(n.Container,{isPreview:E,children:[e.jsx(L,{children:e.jsx(b.default,{color:"white",height:8,width:8})}),a===o.HEADER_TYPES.TEXT?e.jsx(P.default,{bold:!0,text:u?.replace(/</g,"&lt;").replace(/>/g,"&gt;")}):a!==o.HEADER_TYPES.NONE?e.jsx(R.MediaCard,{headerAssetLink:m,headerAssetName:y,mediaType:a,imagePreviewStyles:a===o.HEADER_TYPES.IMAGE?C:{}}):e.jsx(e.Fragment,{}),!!s&&e.jsx(e.Fragment,{children:x?e.jsx(e.Fragment,{children:x}):e.jsx(e.Fragment,{children:j==="html"?e.jsx("div",{className:"richTextEditor",style:w,dangerouslySetInnerHTML:{__html:_.convertToHTML(s)}}):e.jsx(l.BodySecondary,{children:s?.replace(/</g,"&lt;").replace(/>/g,"&gt;")})})}),e.jsxs(n.FooterWrapper,{children:[e.jsx(H.Tooltip,{body:c??"",placement:"top",children:e.jsx(n.FooterText,{style:{flex:1},children:c})}),e.jsx(n.TimeStamp,{children:"16:48"})]}),p===o.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:S?.map((r,d)=>e.jsx(T.ChatBtn,{text:r.text},d))}):p===o.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:g?.map((r,d)=>e.jsx(T.ChatBtn,{textTypography:h?l.Caption:l.BodySecondary,extraContent:f?r.extra:void 0,placeholder:r.placeholder,text:r.text,Icon:r.type==="phoneNumber"?F.default:M.default,size:q},d))}):e.jsx(e.Fragment,{})]})};exports.default=W;
 //# sourceMappingURL=ChatUI.js.map

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatUI.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.tsx"],"sourcesContent":["import HalfRectangleIcon from '@src/assets/icons/halfRectangle.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport RedirectToIcon from '@src/assets/icons/RedirectToNew.svg';\nimport { CSSProperties, useMemo } from 'react';\nimport styled from 'styled-components';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, Caption } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { WhatsAppFormatToHTML } from '../helpers/WhatsAppFormatToHTML';\nimport { ACTIONS_TYPES, HEADER_TYPES } from '../models/TemplateMeta';\nimport { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';\nimport { ChatBtn } from './ChatBtn';\nimport {\n\tContainer,\n\tFooterText,\n\tFooterWrapper,\n\tTimeStamp,\n} from './ChatUI.style';\nimport { MediaCard } from './MediaCard';\nimport RenderTemplateWithVariable from './RenderTemplateWithVariable';\n\nconst SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -7.7px;\n\ttop: -8px;\n`;\n\nconst ChatUI = (props: WhatsappLikePreviewTypes) => {\n\tconst {\n\t\tbodyText,\n\t\tfooterText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\tquickReplybtn,\n\t\tctaBtn,\n\t\tactionTypes,\n\t\ttextType,\n\t\textras,\n\t\tshowHeader,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tchildren,\n\t\tisPreview,\n\t} = props;\n\n\tconst whatsAppFormatToHTML = new WhatsAppFormatToHTML();\n\tconst textStyle: CSSProperties = useMemo(\n\t\t() => ({\n\t\t\tcolor: COLORS.content.primary,\n\t\t\tmargin: 12,\n\t\t\tfontSize: showHeader\n\t\t\t\t? FONTS.caption.fontSize\n\t\t\t\t: FONTS.bodySecondary.fontSize,\n\t\t\tfontWeight: FONTS.bodySecondary.fontWeight,\n\t\t\tmaxWidth: '100%',\n\t\t\twhiteSpace: 'pre-wrap',\n\t\t\tmarginBottom: 0,\n\t\t\tmarginTop: 8,\n\t\t\twordBreak: 'break-word',\n\t\t}),\n\t\t[],\n\t);\n\n\treturn (\n\t\t<Container isPreview={isPreview}>\n\t\t\t<SideCaret>\n\t\t\t\t<HalfRectangleIcon color={'white'} height={8} width={8} />\n\t\t\t</SideCaret>\n\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t<RenderTemplateWithVariable\n\t\t\t\t\tbold\n\t\t\t\t\ttext={headerText?.replace(/</g, '&lt;').replace(/>/g, '&gt;')}\n\t\t\t\t/>\n\t\t\t) : headerMediaType !== HEADER_TYPES.NONE ? (\n\t\t\t\t<MediaCard\n\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{!!bodyText && (\n\t\t\t\t<>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>{children}</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{textType === 'html' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"richTextEditor\"\n\t\t\t\t\t\t\t\t\tstyle={textStyle}\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: whatsAppFormatToHTML.convertToHTML(bodyText),\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<BodySecondary>\n\t\t\t\t\t\t\t\t\t{bodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;')}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t<FooterWrapper>\n\t\t\t\t<Tooltip body={footerText ?? ''} placement={'top'}>\n\t\t\t\t\t<FooterText style={{ flex: 1 }}>{footerText}</FooterText>\n\t\t\t\t</Tooltip>\n\n\t\t\t\t<TimeStamp>16:48</TimeStamp>\n\t\t\t</FooterWrapper>\n\t\t\t{actionTypes === ACTIONS_TYPES.QUICK_REPLY ? (\n\t\t\t\t<div>\n\t\t\t\t\t{quickReplybtn?.map((button, i) => (\n\t\t\t\t\t\t<ChatBtn key={i} text={button.text} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : actionTypes === ACTIONS_TYPES.CTA_BTN ? (\n\t\t\t\t<div>\n\t\t\t\t\t{ctaBtn?.map((ctaBtn, i) => (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttextTypography={showHeader ? Caption : BodySecondary}\n\t\t\t\t\t\t\textraContent={extras ? ctaBtn.extra : undefined}\n\t\t\t\t\t\t\tplaceholder={ctaBtn.placeholder}\n\t\t\t\t\t\t\ttext={ctaBtn.text}\n\t\t\t\t\t\t\tIcon={ctaBtn.type === 'phoneNumber' ? PhoneIcon : RedirectToIcon}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default ChatUI;\n"],"names":["SideCaret","styled","ChatUI","props","bodyText","footerText","headerMediaType","headerText","headerAssetLink","headerAssetName","quickReplybtn","ctaBtn","actionTypes","textType","extras","showHeader","imagePreviewStyles","size","children","isPreview","whatsAppFormatToHTML","WhatsAppFormatToHTML","textStyle","useMemo","COLORS","FONTS","jsxs","Container","jsx","HalfRectangleIcon","HEADER_TYPES","RenderTemplateWithVariable","MediaCard","Fragment","BodySecondary","FooterWrapper","Tooltip","FooterText","TimeStamp","ACTIONS_TYPES","button","i","ChatBtn","Caption","PhoneIcon","RedirectToIcon"],"mappings":"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"}
+{"version":3,"file":"ChatUI.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.tsx"],"sourcesContent":["import HalfRectangleIcon from '@src/assets/icons/halfRectangle.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport RedirectToIcon from '@src/assets/icons/RedirectToNew.svg';\nimport { CSSProperties, useMemo } from 'react';\nimport styled from 'styled-components';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, Caption } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { WhatsAppFormatToHTML } from '../helpers/WhatsAppFormatToHTML';\nimport { ACTIONS_TYPES, HEADER_TYPES } from '../models/TemplateMeta';\nimport { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';\nimport { ChatBtn } from './ChatBtn';\nimport {\n\tContainer,\n\tFooterText,\n\tFooterWrapper,\n\tTimeStamp,\n} from './ChatUI.style';\nimport { MediaCard } from './MediaCard';\nimport RenderTemplateWithVariable from './RenderTemplateWithVariable';\n\nconst SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -7.7px;\n\ttop: -8px;\n`;\n\nconst ChatUI = (props: WhatsappLikePreviewTypes) => {\n\tconst {\n\t\tbodyText,\n\t\tfooterText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\tquickReplybtn,\n\t\tctaBtn,\n\t\tactionTypes,\n\t\ttextType,\n\t\textras,\n\t\tshowHeader,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tchildren,\n\t\tisPreview,\n\t} = props;\n\n\tconst whatsAppFormatToHTML = new WhatsAppFormatToHTML();\n\tconst textStyle: CSSProperties = useMemo(\n\t\t() => ({\n\t\t\tcolor: COLORS.content.primary,\n\t\t\tmargin: 12,\n\t\t\tfontSize: showHeader\n\t\t\t\t? FONTS.caption.fontSize\n\t\t\t\t: FONTS.bodySecondary.fontSize,\n\t\t\tfontWeight: FONTS.bodySecondary.fontWeight,\n\t\t\tmaxWidth: '100%',\n\t\t\twhiteSpace: 'pre-wrap',\n\t\t\tmarginBottom: 0,\n\t\t\tmarginTop: 8,\n\t\t\twordBreak: 'break-word',\n\t\t}),\n\t\t[],\n\t);\n\n\treturn (\n\t\t<Container isPreview={isPreview}>\n\t\t\t<SideCaret>\n\t\t\t\t<HalfRectangleIcon color={'white'} height={8} width={8} />\n\t\t\t</SideCaret>\n\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t<RenderTemplateWithVariable\n\t\t\t\t\tbold\n\t\t\t\t\ttext={headerText?.replace(/</g, '&lt;').replace(/>/g, '&gt;')}\n\t\t\t\t/>\n\t\t\t) : headerMediaType !== HEADER_TYPES.NONE ? (\n\t\t\t\t<MediaCard\n\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{!!bodyText && (\n\t\t\t\t<>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>{children}</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{textType === 'html' ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"richTextEditor\"\n\t\t\t\t\t\t\t\t\tstyle={textStyle}\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t\t__html: whatsAppFormatToHTML.convertToHTML(bodyText),\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<BodySecondary>\n\t\t\t\t\t\t\t\t\t{bodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;')}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\n\t\t\t<FooterWrapper>\n\t\t\t\t<Tooltip body={footerText ?? ''} placement={'top'}>\n\t\t\t\t\t<FooterText style={{ flex: 1 }}>{footerText}</FooterText>\n\t\t\t\t</Tooltip>\n\n\t\t\t\t<TimeStamp>16:48</TimeStamp>\n\t\t\t</FooterWrapper>\n\t\t\t{actionTypes === ACTIONS_TYPES.QUICK_REPLY ? (\n\t\t\t\t<div>\n\t\t\t\t\t{quickReplybtn?.map((button, i) => (\n\t\t\t\t\t\t<ChatBtn key={i} text={button.text} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : actionTypes === ACTIONS_TYPES.CTA_BTN ? (\n\t\t\t\t<div>\n\t\t\t\t\t{ctaBtn?.map((ctaBtn, i) => (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttextTypography={showHeader ? Caption : BodySecondary}\n\t\t\t\t\t\t\textraContent={extras ? ctaBtn.extra : undefined}\n\t\t\t\t\t\t\tplaceholder={ctaBtn.placeholder}\n\t\t\t\t\t\t\ttext={ctaBtn.text}\n\t\t\t\t\t\t\tIcon={ctaBtn.type === 'phoneNumber' ? PhoneIcon : RedirectToIcon}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n\nexport default ChatUI;\n"],"names":["SideCaret","styled","ChatUI","props","bodyText","footerText","headerMediaType","headerText","headerAssetLink","headerAssetName","quickReplybtn","ctaBtn","actionTypes","textType","extras","showHeader","imagePreviewStyles","size","children","isPreview","whatsAppFormatToHTML","WhatsAppFormatToHTML","textStyle","useMemo","COLORS","FONTS","jsxs","Container","jsx","HalfRectangleIcon","HEADER_TYPES","RenderTemplateWithVariable","MediaCard","Fragment","BodySecondary","FooterWrapper","Tooltip","FooterText","TimeStamp","ACTIONS_TYPES","button","i","ChatBtn","Caption","PhoneIcon","RedirectToIcon"],"mappings":"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"}

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),a=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),a=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=d(i),n=r.default.div`
 	background: ${t.COLORS.surface.standard};
 	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
@@ -18,16 +18,16 @@
 			${t.COLORS.stroke.brand};
 		box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
 	}
-`,o=r(i.Caption)`
+`,o=r.default(a.Caption)`
 	color: ${t.COLORS.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,n=r(o)`
+`,s=r.default(o)`
 	max-width: 200px;
-`,d=r.div`
+`,p=r.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -36,19 +36,19 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,s=r.div`
+`,l=r.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${t.COLORS.stroke.primary};
-`,p=r.div`
+`,x=r.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;r.div`
+`;r.default.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -62,9 +62,9 @@
 	background: ${t.COLORS.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`;r.div`
+`;r.default.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;exports.ChatBtnContainer=s;exports.Container=a;exports.FooterText=n;exports.FooterWrapper=p;exports.MediaContainer=d;exports.TimeStamp=o;
+`;exports.ChatBtnContainer=l;exports.Container=n;exports.FooterText=s;exports.FooterWrapper=x;exports.MediaContainer=p;exports.TimeStamp=o;
 //# sourceMappingURL=ChatUI.style.js.map

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t:hover {\n\t\tborder: 2px\n\t\t\t${(props) =>\n\t\t\t\t!props.isPreview\n\t\t\t\t\t? props.isWhatsappCarousel\n\t\t\t\t\t\t? props.hasError\n\t\t\t\t\t\t\t? 'dashed'\n\t\t\t\t\t\t\t: props.showBorder\n\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t: 'dashed'\n\t\t\t\t\t\t: 'solid'\n\t\t\t\t\t: 'unset'}\n\t\t\t${COLORS.stroke.brand};\n\t\tbox-shadow: ${(props) =>\n\t\t\t!props.isPreview && '4px 4px 12px rgba(0, 0, 0, 0.25)'};\n\t}\n`;\n\nexport const TimeStamp = styled(Caption)`\n\tcolor: ${COLORS.content.secondary};\n\tmax-width: 80px;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-wrap: wrap;\n`;\n\nexport const FooterText = styled(TimeStamp)`\n\tmax-width: 200px;\n`;\n\nexport const MediaContainer = styled.div`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: 4px;\n\tmargin: 0px 8px;\n`;\n\nexport const ChatBtnContainer = styled.div`\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const FooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin: 8px 12px;\n`;\n\nexport const MediaNameAbsWrapper = styled.div`\n\tposition: absolute;\n\tbottom: -1px;\n\tleft: 0;\n\ttext-align: center;\n\twidth: 100%;\n\tpadding: 10px;\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: start;\n\tbackground: ${COLORS.surface.hovered};\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n`;\n\nexport const DownloadMediaIconHolder = styled.div`\n\tposition: absolute;\n\ttop: 16px;\n\tright: 16px;\n`;\n"],"names":["Container","styled","COLORS","props","TimeStamp","Caption","FooterText","MediaContainer","ChatBtnContainer","FooterWrapper"],"mappings":"oMAIaA,EAAYC,EAAO;AAAA,eAQjBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,2BACVC,GAAWA,EAAM,eAAiB,OAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxEA,GACFA,EAAM,SACH,GAAGD,EAAAA,OAAO,QAAQ,QAAQ,GAC1BC,EAAM,WACN,GAAGD,EAAAA,OAAO,OAAO,KAAK,GACtB,GAAGA,SAAO,OAAO,OAAO,EAAE;AAAA,WACpBC,GACVA,EAAM,kBAAoB,cAAcD,SAAO,QAAQ,KAAK,EAAE;AAAA,WACpDC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK5DA,GACDA,EAAM,UAQJ,QAPAA,EAAM,mBACLA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OACM;AAAA,KACTD,EAAAA,OAAO,OAAO,KAAK;AAAA,gBACPC,GACd,CAACA,EAAM,WAAa,kCAAkC;AAAA;AAAA,EAI5CC,EAAYH,EAAOI,SAAO;AAAA,UAC7BH,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrBI,EAAaL,EAAOG,CAAS;AAAA;AAAA,EAI7BG,EAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBO,EAAmBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGjCO,EAAgBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAODA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKED,EAAO;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t:hover {\n\t\tborder: 2px\n\t\t\t${(props) =>\n\t\t\t\t!props.isPreview\n\t\t\t\t\t? props.isWhatsappCarousel\n\t\t\t\t\t\t? props.hasError\n\t\t\t\t\t\t\t? 'dashed'\n\t\t\t\t\t\t\t: props.showBorder\n\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t: 'dashed'\n\t\t\t\t\t\t: 'solid'\n\t\t\t\t\t: 'unset'}\n\t\t\t${COLORS.stroke.brand};\n\t\tbox-shadow: ${(props) =>\n\t\t\t!props.isPreview && '4px 4px 12px rgba(0, 0, 0, 0.25)'};\n\t}\n`;\n\nexport const TimeStamp = styled(Caption)`\n\tcolor: ${COLORS.content.secondary};\n\tmax-width: 80px;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-wrap: wrap;\n`;\n\nexport const FooterText = styled(TimeStamp)`\n\tmax-width: 200px;\n`;\n\nexport const MediaContainer = styled.div`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: 4px;\n\tmargin: 0px 8px;\n`;\n\nexport const ChatBtnContainer = styled.div`\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const FooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin: 8px 12px;\n`;\n\nexport const MediaNameAbsWrapper = styled.div`\n\tposition: absolute;\n\tbottom: -1px;\n\tleft: 0;\n\ttext-align: center;\n\twidth: 100%;\n\tpadding: 10px;\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: start;\n\tbackground: ${COLORS.surface.hovered};\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n`;\n\nexport const DownloadMediaIconHolder = styled.div`\n\tposition: absolute;\n\ttop: 16px;\n\tright: 16px;\n`;\n"],"names":["Container","styled","COLORS","props","TimeStamp","Caption","FooterText","MediaContainer","ChatBtnContainer","FooterWrapper"],"mappings":"mQAIaA,EAAYC,EAAAA,QAAO;AAAA,eAQjBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,2BACVC,GAAWA,EAAM,eAAiB,OAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxEA,GACFA,EAAM,SACH,GAAGD,EAAAA,OAAO,QAAQ,QAAQ,GAC1BC,EAAM,WACN,GAAGD,EAAAA,OAAO,OAAO,KAAK,GACtB,GAAGA,SAAO,OAAO,OAAO,EAAE;AAAA,WACpBC,GACVA,EAAM,kBAAoB,cAAcD,SAAO,QAAQ,KAAK,EAAE;AAAA,WACpDC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK5DA,GACDA,EAAM,UAQJ,QAPAA,EAAM,mBACLA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OACM;AAAA,KACTD,EAAAA,OAAO,OAAO,KAAK;AAAA,gBACPC,GACd,CAACA,EAAM,WAAa,kCAAkC;AAAA;AAAA,EAI5CC,EAAYH,EAAAA,QAAOI,SAAO;AAAA,UAC7BH,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrBI,EAAaL,EAAAA,QAAOG,CAAS;AAAA;AAAA,EAI7BG,EAAiBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBO,EAAmBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGjCO,EAAgBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAODA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKED,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),D=require("../../../assets/icons/chevronDownOutline.svg.js"),V=require("../../../assets/icons/copy-code-icon.svg.js"),k=require("../../../assets/icons/halfRectangle.svg.js"),c=require("../../../assets/icons/phone.svg.js"),Q=require("../../../assets/icons/qrb.svg.js"),g=require("../../../assets/icons/RedirectToNew.svg.js"),h=require("styled-components"),z=require("../../template-context-mapper/context/templateModalContext.js"),p=require("../../TypographyStyle.js"),K=require("../../../constants/Theme.js"),W=require("../helpers/VariableEditorHelper.js"),i=require("../models/TemplateMeta.js"),x=require("./ChatBtn.js"),d=require("./ChatUI.style.js"),G=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),X=require("./MediaCard.js"),$=require("../../tooltips/Tooltip.js"),J=h.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),B=require("../../../assets/icons/chevronDownOutline.svg.js"),V=require("../../../assets/icons/copy-code-icon.svg.js"),k=require("../../../assets/icons/halfRectangle.svg.js"),p=require("../../../assets/icons/phone.svg.js"),Q=require("../../../assets/icons/qrb.svg.js"),S=require("../../../assets/icons/RedirectToNew.svg.js"),z=require("styled-components"),K=require("../../template-context-mapper/context/templateModalContext.js"),x=require("../../TypographyStyle.js"),W=require("../../../constants/Theme.js"),G=require("../helpers/VariableEditorHelper.js"),a=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),l=require("./ChatUI.style.js"),X=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),$=require("./MediaCard.js"),J=require("../../tooltips/Tooltip.js"),Z=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},u=Z(z),ee=u.default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -7.7px;
 	top: -8px;
-`,u=h.div`
+`,C=u.default.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${K.COLORS.content.primary};
+	color: ${W.COLORS.content.primary};
 	word-wrap: break-word;
-`,Z=h(u)`
+`,te=u.default(C)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,S=new W.VariableEditorHelper,ee=I=>{const{bodyText:C,footerText:m,headerMediaType:a,headerText:_,headerAssetLink:j,headerAssetName:O,quickReplybtn:q,ctaBtn:L,actionTypes:T,extras:P,showHeader:v,imagePreviewStyles:w,size:y,bodyVariableList:H,headerVariableList:R,buttons:l,limitedTimeOfferComponent:n,carouselCardIndex:r,isWhatsappCarousel:f,isPreview:M,children:N,hideFooter:b=!1}=I,A=S.format(C?.replace(/</g,"&lt;").replace(/>/g,"&gt;"),H),Y=S.format(_?.replace(/</g,"&lt;").replace(/>/g,"&gt;"),R),{selectedCarouselIndex:s,isProductCarouselType:E,errorIndexes:F,isCarouselHovered:U}=z.useTemplateModalContext(),B={COPY_CODE:V.default,PHONE_NUMBER:c.default,URL:g.default,QUICK_REPLY:Q.default,VOICE_CALL:c.default,CALL_PERMISSION:D.default,REQUEST_CONTACT_INFO:void 0};return e.jsxs(d.Container,{isCarouselCard:r!=null&&r>-1,showBorder:r!=null&&r===s||E&&r!=null&&r>-1&&s!=null&&s>-1,hasError:F?.includes(r??-2),isWhatsappCarousel:f,isPreview:M,showDashedBorder:E&&U&&(s??-1)<0&&(r??-1)>-1,children:[!f&&e.jsx(J,{children:e.jsx(k.default,{color:"white",height:8,width:8})}),a===i.HEADER_TYPES.TEXT?e.jsx(Z,{dangerouslySetInnerHTML:{__html:Y}}):a!==i.HEADER_TYPES.NONE?e.jsx(X.MediaCard,{headerAssetLink:j,headerAssetName:O,mediaType:a,imagePreviewStyles:a===i.HEADER_TYPES.IMAGE?w:{}}):e.jsx(e.Fragment,{}),n?.dateTime?e.jsx(G.LimitedTimeOffer,{text:n.text,dateTime:n.dateTime,code:n.code}):e.jsx(e.Fragment,{}),!!C&&e.jsx(e.Fragment,{children:e.jsx(u,{dangerouslySetInnerHTML:{__html:A},style:{flex:1}})}),N,!b&&e.jsxs(d.FooterWrapper,{children:[e.jsx($.Tooltip,{body:m??"",placement:"top",children:e.jsx(d.FooterText,{style:{flex:1},children:m})}),e.jsx(d.TimeStamp,{children:"16:48"})]}),l&&l.length>0?l.map((t,o)=>e.jsx(x.ChatBtn,{text:t.type==="COPY_CODE"?"Copy code":t.text,Icon:B[t.type],size:y,iconPosition:t.type==="CALL_PERMISSION"?"right":"left",textTypography:t.type==="CALL_PERMISSION"?p.TitleSmall:void 0},o)):T===i.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:q?.map((t,o)=>e.jsx(x.ChatBtn,{text:t.text},o))}):T===i.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:L?.map((t,o)=>e.jsx(x.ChatBtn,{textTypography:v?p.Caption:p.BodySecondary,extraContent:P?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:t.type==="phoneNumber"?c.default:g.default,size:y},o))}):e.jsx(e.Fragment,{})]})};exports.ChatUIV2=ee;exports.HtmlContainer=u;
+`,_=new G.VariableEditorHelper,re=o=>{const{bodyText:m,footerText:T,headerMediaType:n,headerText:I,headerAssetLink:j,headerAssetName:O,quickReplybtn:q,ctaBtn:L,actionTypes:y,extras:P,showHeader:v,imagePreviewStyles:w,size:f,bodyVariableList:H,headerVariableList:R,buttons:c,limitedTimeOfferComponent:s,carouselCardIndex:r,isWhatsappCarousel:E,isPreview:b,children:M,hideFooter:N=!1}=o,A=_.format(m?.replace(/</g,"&lt;").replace(/>/g,"&gt;"),H),Y=_.format(I?.replace(/</g,"&lt;").replace(/>/g,"&gt;"),R),{selectedCarouselIndex:d,isProductCarouselType:g,errorIndexes:D,isCarouselHovered:F}=K.useTemplateModalContext(),U={COPY_CODE:V.default,PHONE_NUMBER:p.default,URL:S.default,QUICK_REPLY:Q.default,VOICE_CALL:p.default,CALL_PERMISSION:B.default,REQUEST_CONTACT_INFO:void 0};return e.jsxs(l.Container,{isCarouselCard:r!=null&&r>-1,showBorder:r!=null&&r===d||g&&r!=null&&r>-1&&d!=null&&d>-1,hasError:D?.includes(r??-2),isWhatsappCarousel:E,isPreview:b,showDashedBorder:g&&F&&(d??-1)<0&&(r??-1)>-1,children:[!E&&e.jsx(ee,{children:e.jsx(k.default,{color:"white",height:8,width:8})}),n===a.HEADER_TYPES.TEXT?e.jsx(te,{dangerouslySetInnerHTML:{__html:Y}}):n!==a.HEADER_TYPES.NONE?e.jsx($.MediaCard,{headerAssetLink:j,headerAssetName:O,mediaType:n,imagePreviewStyles:n===a.HEADER_TYPES.IMAGE?w:{}}):e.jsx(e.Fragment,{}),s?.dateTime?e.jsx(X.LimitedTimeOffer,{text:s.text,dateTime:s.dateTime,code:s.code}):e.jsx(e.Fragment,{}),!!m&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:A},style:{flex:1}})}),M,!N&&e.jsxs(l.FooterWrapper,{children:[e.jsx(J.Tooltip,{body:T??"",placement:"top",children:e.jsx(l.FooterText,{style:{flex:1},children:T})}),e.jsx(l.TimeStamp,{children:"16:48"})]}),c&&c.length>0?c.map((t,i)=>e.jsx(h.ChatBtn,{text:t.type==="COPY_CODE"?"Copy code":t.text,Icon:U[t.type],size:f,iconPosition:t.type==="CALL_PERMISSION"?"right":"left",textTypography:t.type==="CALL_PERMISSION"?x.TitleSmall:void 0},i)):y===a.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:q?.map((t,i)=>e.jsx(h.ChatBtn,{text:t.text},i))}):y===a.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:L?.map((t,i)=>e.jsx(h.ChatBtn,{textTypography:v?x.Caption:x.BodySecondary,extraContent:P?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:t.type==="phoneNumber"?p.default:S.default,size:f},i))}):e.jsx(e.Fragment,{})]})};exports.ChatUIV2=re;exports.HtmlContainer=C;
 //# sourceMappingURL=ChatUiV2.js.map

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatUiV2.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUiV2.tsx"],"sourcesContent":["import ChevronDownIcon from '@src/assets/icons/chevronDownOutline.svg';\nimport CopyCodeIcon from '@src/assets/icons/copy-code-icon.svg';\nimport HalfRectangleIcon from '@src/assets/icons/halfRectangle.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport QRBIcon from '@src/assets/icons/qrb.svg';\nimport RedirectToIcon from '@src/assets/icons/RedirectToNew.svg';\nimport styled from 'styled-components';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodySecondary,\n\tCaption,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { ACTIONS_TYPES, HEADER_TYPES } from '../models/TemplateMeta';\nimport {\n\tWhatsappLikePreviewTypes,\n\tWhatsappTemplateButtonTypes,\n} from '../models/WhatsAppTemplate';\nimport { ChatBtn } from './ChatBtn';\nimport {\n\tContainer,\n\tFooterText,\n\tFooterWrapper,\n\tTimeStamp,\n} from './ChatUI.style';\nimport { LimitedTimeOffer } from './LimitedTimeOffer/LimitedTimeOffer.index';\nimport { MediaCard } from './MediaCard';\n\nconst SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -7.7px;\n\ttop: -8px;\n`;\n\nexport const HtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 8px 12px 0px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nconst HeaderTextContainer = styled(HtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const ChatUIV2 = (props: WhatsappLikePreviewTypes) => {\n\tconst {\n\t\tbodyText,\n\t\tfooterText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\tquickReplybtn,\n\t\tctaBtn,\n\t\tactionTypes,\n\t\textras,\n\t\tshowHeader,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tlimitedTimeOfferComponent,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\tchildren,\n\t\thideFooter = false,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\theaderVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst icons: Record<WhatsappTemplateButtonTypes, React.FC | undefined> = {\n\t\tCOPY_CODE: CopyCodeIcon,\n\t\tPHONE_NUMBER: PhoneIcon,\n\t\tURL: RedirectToIcon,\n\t\tQUICK_REPLY: QRBIcon,\n\t\tVOICE_CALL: PhoneIcon,\n\t\tCALL_PERMISSION: ChevronDownIcon,\n\t\tREQUEST_CONTACT_INFO: undefined,\n\t};\n\n\treturn (\n\t\t<Container\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t>\n\t\t\t{!isWhatsappCarousel && (\n\t\t\t\t<SideCaret>\n\t\t\t\t\t<HalfRectangleIcon color={'white'} height={8} width={8} />\n\t\t\t\t</SideCaret>\n\t\t\t)}\n\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t<HeaderTextContainer\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: headerHtml,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : headerMediaType !== HEADER_TYPES.NONE ? (\n\t\t\t\t<MediaCard\n\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{/* Rendering LTO if dateTime exists */}\n\t\t\t{limitedTimeOfferComponent?.dateTime ? (\n\t\t\t\t<LimitedTimeOffer\n\t\t\t\t\ttext={limitedTimeOfferComponent.text}\n\t\t\t\t\tdateTime={limitedTimeOfferComponent.dateTime}\n\t\t\t\t\tcode={limitedTimeOfferComponent.code}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{!!bodyText && (\n\t\t\t\t<>\n\t\t\t\t\t<HtmlContainer\n\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={{ flex: 1 }}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{!hideFooter && (\n\t\t\t\t<FooterWrapper>\n\t\t\t\t\t<Tooltip body={footerText ?? ''} placement={'top'}>\n\t\t\t\t\t\t<FooterText style={{ flex: 1 }}>{footerText}</FooterText>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<TimeStamp>16:48</TimeStamp>\n\t\t\t\t</FooterWrapper>\n\t\t\t)}\n\n\t\t\t{/* Instead of action Type, this renders ChatBtn for all buttons. Rest of the code based on Action Type is maintained for backward compatibility */}\n\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\tbuttons.map((button, i) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttext={button.type === 'COPY_CODE' ? 'Copy code' : button.text}\n\t\t\t\t\t\t\tIcon={icons[button.type]}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\ticonPosition={\n\t\t\t\t\t\t\t\tbutton.type === 'CALL_PERMISSION' ? 'right' : 'left'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttextTypography={\n\t\t\t\t\t\t\t\tbutton.type === 'CALL_PERMISSION' ? TitleSmall : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t) : actionTypes === ACTIONS_TYPES.QUICK_REPLY ? (\n\t\t\t\t<div>\n\t\t\t\t\t{quickReplybtn?.map((button, i) => (\n\t\t\t\t\t\t<ChatBtn key={i} text={button.text} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : actionTypes === ACTIONS_TYPES.CTA_BTN ? (\n\t\t\t\t<div>\n\t\t\t\t\t{ctaBtn?.map((ctaBtn, i) => (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttextTypography={showHeader ? Caption : BodySecondary}\n\t\t\t\t\t\t\textraContent={extras ? ctaBtn.extra : undefined}\n\t\t\t\t\t\t\tplaceholder={ctaBtn.placeholder}\n\t\t\t\t\t\t\ttext={ctaBtn.text}\n\t\t\t\t\t\t\tIcon={ctaBtn.type === 'phoneNumber' ? PhoneIcon : RedirectToIcon}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["SideCaret","styled","HtmlContainer","COLORS","HeaderTextContainer","variableEditorHelper","VariableEditorHelper","ChatUIV2","props","bodyText","footerText","headerMediaType","headerText","headerAssetLink","headerAssetName","quickReplybtn","ctaBtn","actionTypes","extras","showHeader","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","limitedTimeOfferComponent","carouselCardIndex","isWhatsappCarousel","isPreview","children","hideFooter","bodyHTML","headerHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","icons","CopyCodeIcon","PhoneIcon","RedirectToIcon","QRBIcon","ChevronDownIcon","jsxs","Container","jsx","HalfRectangleIcon","HEADER_TYPES","MediaCard","Fragment","LimitedTimeOffer","FooterWrapper","Tooltip","FooterText","TimeStamp","button","i","ChatBtn","TitleSmall","ACTIONS_TYPES","Caption","BodySecondary"],"mappings":"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"}
+{"version":3,"file":"ChatUiV2.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUiV2.tsx"],"sourcesContent":["import ChevronDownIcon from '@src/assets/icons/chevronDownOutline.svg';\nimport CopyCodeIcon from '@src/assets/icons/copy-code-icon.svg';\nimport HalfRectangleIcon from '@src/assets/icons/halfRectangle.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport QRBIcon from '@src/assets/icons/qrb.svg';\nimport RedirectToIcon from '@src/assets/icons/RedirectToNew.svg';\nimport styled from 'styled-components';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodySecondary,\n\tCaption,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { VariableEditorHelper } from '../helpers/VariableEditorHelper';\nimport { ACTIONS_TYPES, HEADER_TYPES } from '../models/TemplateMeta';\nimport {\n\tWhatsappLikePreviewTypes,\n\tWhatsappTemplateButtonTypes,\n} from '../models/WhatsAppTemplate';\nimport { ChatBtn } from './ChatBtn';\nimport {\n\tContainer,\n\tFooterText,\n\tFooterWrapper,\n\tTimeStamp,\n} from './ChatUI.style';\nimport { LimitedTimeOffer } from './LimitedTimeOffer/LimitedTimeOffer.index';\nimport { MediaCard } from './MediaCard';\n\nconst SideCaret = styled.div`\n\tposition: absolute;\n\twidth: 8px;\n\theight: 8px;\n\tleft: -7.7px;\n\ttop: -8px;\n`;\n\nexport const HtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 8px 12px 0px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nconst HeaderTextContainer = styled(HtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nconst variableEditorHelper = new VariableEditorHelper();\n\nexport const ChatUIV2 = (props: WhatsappLikePreviewTypes) => {\n\tconst {\n\t\tbodyText,\n\t\tfooterText,\n\t\theaderMediaType,\n\t\theaderText,\n\t\theaderAssetLink,\n\t\theaderAssetName,\n\t\tquickReplybtn,\n\t\tctaBtn,\n\t\tactionTypes,\n\t\textras,\n\t\tshowHeader,\n\t\timagePreviewStyles,\n\t\tsize,\n\t\tbodyVariableList,\n\t\theaderVariableList,\n\t\tbuttons,\n\t\tlimitedTimeOfferComponent,\n\t\tcarouselCardIndex,\n\t\tisWhatsappCarousel,\n\t\tisPreview,\n\t\tchildren,\n\t\thideFooter = false,\n\t} = props;\n\n\tconst bodyHTML = variableEditorHelper.format(\n\t\tbodyText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\tbodyVariableList,\n\t);\n\tconst headerHtml = variableEditorHelper.format(\n\t\theaderText?.replace(/</g, '&lt;').replace(/>/g, '&gt;'),\n\t\theaderVariableList,\n\t);\n\tconst {\n\t\tselectedCarouselIndex,\n\t\tisProductCarouselType,\n\t\terrorIndexes,\n\t\tisCarouselHovered,\n\t} = useTemplateModalContext();\n\n\tconst icons: Record<WhatsappTemplateButtonTypes, React.FC | undefined> = {\n\t\tCOPY_CODE: CopyCodeIcon,\n\t\tPHONE_NUMBER: PhoneIcon,\n\t\tURL: RedirectToIcon,\n\t\tQUICK_REPLY: QRBIcon,\n\t\tVOICE_CALL: PhoneIcon,\n\t\tCALL_PERMISSION: ChevronDownIcon,\n\t\tREQUEST_CONTACT_INFO: undefined,\n\t};\n\n\treturn (\n\t\t<Container\n\t\t\tisCarouselCard={carouselCardIndex != undefined && carouselCardIndex > -1}\n\t\t\tshowBorder={\n\t\t\t\t(carouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex === selectedCarouselIndex) ||\n\t\t\t\t(isProductCarouselType &&\n\t\t\t\t\tcarouselCardIndex != undefined &&\n\t\t\t\t\tcarouselCardIndex > -1 &&\n\t\t\t\t\tselectedCarouselIndex != undefined &&\n\t\t\t\t\tselectedCarouselIndex > -1)\n\t\t\t}\n\t\t\thasError={errorIndexes?.includes(carouselCardIndex ?? -2)}\n\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\tisPreview={isPreview}\n\t\t\tshowDashedBorder={\n\t\t\t\tisProductCarouselType &&\n\t\t\t\tisCarouselHovered &&\n\t\t\t\t(selectedCarouselIndex ?? -1) < 0 &&\n\t\t\t\t(carouselCardIndex ?? -1) > -1\n\t\t\t}\n\t\t>\n\t\t\t{!isWhatsappCarousel && (\n\t\t\t\t<SideCaret>\n\t\t\t\t\t<HalfRectangleIcon color={'white'} height={8} width={8} />\n\t\t\t\t</SideCaret>\n\t\t\t)}\n\t\t\t{headerMediaType === HEADER_TYPES.TEXT ? (\n\t\t\t\t<HeaderTextContainer\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: headerHtml,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : headerMediaType !== HEADER_TYPES.NONE ? (\n\t\t\t\t<MediaCard\n\t\t\t\t\theaderAssetLink={headerAssetLink}\n\t\t\t\t\theaderAssetName={headerAssetName}\n\t\t\t\t\tmediaType={headerMediaType}\n\t\t\t\t\timagePreviewStyles={\n\t\t\t\t\t\theaderMediaType === HEADER_TYPES.IMAGE ? imagePreviewStyles : {}\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{/* Rendering LTO if dateTime exists */}\n\t\t\t{limitedTimeOfferComponent?.dateTime ? (\n\t\t\t\t<LimitedTimeOffer\n\t\t\t\t\ttext={limitedTimeOfferComponent.text}\n\t\t\t\t\tdateTime={limitedTimeOfferComponent.dateTime}\n\t\t\t\t\tcode={limitedTimeOfferComponent.code}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\n\t\t\t{!!bodyText && (\n\t\t\t\t<>\n\t\t\t\t\t<HtmlContainer\n\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t__html: bodyHTML,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstyle={{ flex: 1 }}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t{children}\n\t\t\t{!hideFooter && (\n\t\t\t\t<FooterWrapper>\n\t\t\t\t\t<Tooltip body={footerText ?? ''} placement={'top'}>\n\t\t\t\t\t\t<FooterText style={{ flex: 1 }}>{footerText}</FooterText>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<TimeStamp>16:48</TimeStamp>\n\t\t\t\t</FooterWrapper>\n\t\t\t)}\n\n\t\t\t{/* Instead of action Type, this renders ChatBtn for all buttons. Rest of the code based on Action Type is maintained for backward compatibility */}\n\t\t\t{buttons && buttons.length > 0 ? (\n\t\t\t\tbuttons.map((button, i) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttext={button.type === 'COPY_CODE' ? 'Copy code' : button.text}\n\t\t\t\t\t\t\tIcon={icons[button.type]}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\ticonPosition={\n\t\t\t\t\t\t\t\tbutton.type === 'CALL_PERMISSION' ? 'right' : 'left'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttextTypography={\n\t\t\t\t\t\t\t\tbutton.type === 'CALL_PERMISSION' ? TitleSmall : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t) : actionTypes === ACTIONS_TYPES.QUICK_REPLY ? (\n\t\t\t\t<div>\n\t\t\t\t\t{quickReplybtn?.map((button, i) => (\n\t\t\t\t\t\t<ChatBtn key={i} text={button.text} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : actionTypes === ACTIONS_TYPES.CTA_BTN ? (\n\t\t\t\t<div>\n\t\t\t\t\t{ctaBtn?.map((ctaBtn, i) => (\n\t\t\t\t\t\t<ChatBtn\n\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\ttextTypography={showHeader ? Caption : BodySecondary}\n\t\t\t\t\t\t\textraContent={extras ? ctaBtn.extra : undefined}\n\t\t\t\t\t\t\tplaceholder={ctaBtn.placeholder}\n\t\t\t\t\t\t\ttext={ctaBtn.text}\n\t\t\t\t\t\t\tIcon={ctaBtn.type === 'phoneNumber' ? PhoneIcon : RedirectToIcon}\n\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["SideCaret","styled","HtmlContainer","COLORS","HeaderTextContainer","variableEditorHelper","VariableEditorHelper","ChatUIV2","props","bodyText","footerText","headerMediaType","headerText","headerAssetLink","headerAssetName","quickReplybtn","ctaBtn","actionTypes","extras","showHeader","imagePreviewStyles","size","bodyVariableList","headerVariableList","buttons","limitedTimeOfferComponent","carouselCardIndex","isWhatsappCarousel","isPreview","children","hideFooter","bodyHTML","headerHtml","selectedCarouselIndex","isProductCarouselType","errorIndexes","isCarouselHovered","useTemplateModalContext","icons","CopyCodeIcon","PhoneIcon","RedirectToIcon","QRBIcon","ChevronDownIcon","jsxs","Container","jsx","HalfRectangleIcon","HEADER_TYPES","MediaCard","Fragment","LimitedTimeOffer","FooterWrapper","Tooltip","FooterText","TimeStamp","button","ChatBtn","TitleSmall","ACTIONS_TYPES","Caption","BodySecondary"],"mappings":"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"}

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../../../assets/icons/lto_icon.svg.js"),n=require("styled-components"),t=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js"),x=l=>{const{text:c,dateTime:s,code:f}=l;return e.jsxs(r,{children:[e.jsx(o,{children:e.jsx(y.default,{width:24,height:24,style:{display:"flex"}})}),e.jsxs(d,{children:[e.jsx(t.BodySecondary,{numberOfLines:2,color:i.COLORS.content.primary,children:c}),e.jsxs(t.BodyTiny,{numberOfLines:3,style:{overflowWrap:"anywhere"},color:i.COLORS.content.secondary,children:["Offer Ends on ",s]}),e.jsxs(t.BodyTiny,{numberOfLines:2,color:i.COLORS.content.placeholder,children:["Code ",f]})]})]})},r=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../../../../assets/icons/lto_icon.svg.js"),y=require("styled-components"),i=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=u(y),x=e=>{const{text:c,dateTime:s,code:f}=e;return t.jsxs(r,{children:[t.jsx(d,{children:t.jsx(a.default,{width:24,height:24,style:{display:"flex"}})}),t.jsxs(l,{children:[t.jsx(i.BodySecondary,{numberOfLines:2,color:n.COLORS.content.primary,children:c}),t.jsxs(i.BodyTiny,{numberOfLines:3,style:{overflowWrap:"anywhere"},color:n.COLORS.content.secondary,children:["Offer Ends on ",s]}),t.jsxs(i.BodyTiny,{numberOfLines:2,color:n.COLORS.content.placeholder,children:["Code ",f]})]})]})},r=o.default.div`
 	display: flex;
 	flex-direction: row;
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
 	align-items: center;
-`,o=n.div`
+`,d=o.default.div`
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,9 +14,9 @@
 	border-radius: 24px;
 	background: #d8f0e7;
 	margin: 5px;
-`,d=n.div`
+`,l=o.default.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
-`;exports.LimitedTimeOffer=x;exports.StyledLimitedOfferTime=r;exports.StyledLtoIcon=o;exports.StyledLtoText=d;
+`;exports.LimitedTimeOffer=x;exports.StyledLimitedOfferTime=r;exports.StyledLtoIcon=d;exports.StyledLtoText=l;
 //# sourceMappingURL=LimitedTimeOffer.index.js.map

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitedTimeOffer.index.js","sources":["../../../../../../src/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.tsx"],"sourcesContent":["import LtoIcon from '@src/assets/icons/lto_icon.svg';\nimport styled from 'styled-components';\nimport { BodySecondary, BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { CreateTemplateType } from '../../models/WhatsAppTemplate';\n\n/**\n * Renders Limited Time Offer component\n * Type of props is infered from template\n */\nexport const LimitedTimeOffer = (\n\tprops: CreateTemplateType['limitedTimeOfferComponent'],\n) => {\n\tconst { text, dateTime, code } = props;\n\n\treturn (\n\t\t<StyledLimitedOfferTime>\n\t\t\t<StyledLtoIcon>\n\t\t\t\t<LtoIcon width={24} height={24} style={{ display: 'flex' }} />\n\t\t\t</StyledLtoIcon>\n\t\t\t<StyledLtoText>\n\t\t\t\t<BodySecondary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{text}\n\t\t\t\t</BodySecondary>\n\t\t\t\t<BodyTiny\n\t\t\t\t\tnumberOfLines={3}\n\t\t\t\t\tstyle={{ overflowWrap: 'anywhere' }}\n\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\tOffer Ends on {dateTime}\n\t\t\t\t</BodyTiny>\n\t\t\t\t<BodyTiny numberOfLines={2} color={COLORS.content.placeholder}>\n\t\t\t\t\tCode {code}\n\t\t\t\t</BodyTiny>\n\t\t\t</StyledLtoText>\n\t\t</StyledLimitedOfferTime>\n\t);\n};\n\nexport const StyledLimitedOfferTime = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground: #f6f6f6;\n\tmargin: 0px 10px;\n\toverflow: hidden;\n\talign-items: center;\n`;\n\nexport const StyledLtoIcon = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n\tbackground: #d8f0e7;\n\tmargin: 5px;\n`;\n\nexport const StyledLtoText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n`;\n"],"names":["LimitedTimeOffer","props","text","dateTime","code","StyledLimitedOfferTime","jsx","StyledLtoIcon","LtoIcon","StyledLtoText","BodySecondary","COLORS","jsxs","BodyTiny","styled"],"mappings":"+RAUaA,EACZC,GACI,CACJ,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,KAAAC,CAAA,EAASH,EAEjC,cACEI,EAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAA,CACA,SAAAD,EAAAA,IAACE,EAAAA,QAAA,CAAQ,MAAO,GAAI,OAAQ,GAAI,MAAO,CAAE,QAAS,MAAA,CAAO,CAAG,EAC7D,SACCC,EAAA,CACA,SAAA,CAAAH,EAAAA,IAACI,EAAAA,eAAc,cAAe,EAAG,MAAOC,EAAAA,OAAO,QAAQ,QACrD,SAAAT,CAAA,CACF,EACAU,EAAAA,KAACC,EAAAA,SAAA,CACA,cAAe,EACf,MAAO,CAAE,aAAc,UAAA,EACvB,MAAOF,EAAAA,OAAO,QAAQ,UACtB,SAAA,CAAA,iBACeR,CAAA,CAAA,CAAA,SAEfU,EAAAA,SAAA,CAAS,cAAe,EAAG,MAAOF,SAAO,QAAQ,YAAa,SAAA,CAAA,QACxDP,CAAA,CAAA,CACP,CAAA,CAAA,CACD,CAAA,EACD,CAEF,EAEaC,EAAyBS,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShCP,EAAgBO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBL,EAAgBK,EAAO;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"LimitedTimeOffer.index.js","sources":["../../../../../../src/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.tsx"],"sourcesContent":["import LtoIcon from '@src/assets/icons/lto_icon.svg';\nimport styled from 'styled-components';\nimport { BodySecondary, BodyTiny } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { CreateTemplateType } from '../../models/WhatsAppTemplate';\n\n/**\n * Renders Limited Time Offer component\n * Type of props is infered from template\n */\nexport const LimitedTimeOffer = (\n\tprops: CreateTemplateType['limitedTimeOfferComponent'],\n) => {\n\tconst { text, dateTime, code } = props;\n\n\treturn (\n\t\t<StyledLimitedOfferTime>\n\t\t\t<StyledLtoIcon>\n\t\t\t\t<LtoIcon width={24} height={24} style={{ display: 'flex' }} />\n\t\t\t</StyledLtoIcon>\n\t\t\t<StyledLtoText>\n\t\t\t\t<BodySecondary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{text}\n\t\t\t\t</BodySecondary>\n\t\t\t\t<BodyTiny\n\t\t\t\t\tnumberOfLines={3}\n\t\t\t\t\tstyle={{ overflowWrap: 'anywhere' }}\n\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\tOffer Ends on {dateTime}\n\t\t\t\t</BodyTiny>\n\t\t\t\t<BodyTiny numberOfLines={2} color={COLORS.content.placeholder}>\n\t\t\t\t\tCode {code}\n\t\t\t\t</BodyTiny>\n\t\t\t</StyledLtoText>\n\t\t</StyledLimitedOfferTime>\n\t);\n};\n\nexport const StyledLimitedOfferTime = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground: #f6f6f6;\n\tmargin: 0px 10px;\n\toverflow: hidden;\n\talign-items: center;\n`;\n\nexport const StyledLtoIcon = styled.div`\n\twidth: 48px;\n\theight: 48px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 24px;\n\tbackground: #d8f0e7;\n\tmargin: 5px;\n`;\n\nexport const StyledLtoText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n`;\n"],"names":["LimitedTimeOffer","props","text","dateTime","code","StyledLimitedOfferTime","jsx","StyledLtoIcon","LtoIcon","StyledLtoText","BodySecondary","COLORS","jsxs","BodyTiny","styled"],"mappings":"8VAUaA,EACZC,GACI,CACJ,KAAM,CAAE,KAAAC,EAAM,SAAAC,EAAU,KAAAC,CAAA,EAASH,EAEjC,cACEI,EAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAA,CACA,SAAAD,EAAAA,IAACE,EAAAA,QAAA,CAAQ,MAAO,GAAI,OAAQ,GAAI,MAAO,CAAE,QAAS,MAAA,CAAO,CAAG,EAC7D,SACCC,EAAA,CACA,SAAA,CAAAH,EAAAA,IAACI,EAAAA,eAAc,cAAe,EAAG,MAAOC,EAAAA,OAAO,QAAQ,QACrD,SAAAT,CAAA,CACF,EACAU,EAAAA,KAACC,EAAAA,SAAA,CACA,cAAe,EACf,MAAO,CAAE,aAAc,UAAA,EACvB,MAAOF,EAAAA,OAAO,QAAQ,UACtB,SAAA,CAAA,iBACeR,CAAA,CAAA,CAAA,SAEfU,EAAAA,SAAA,CAAS,cAAe,EAAG,MAAOF,SAAO,QAAQ,YAAa,SAAA,CAAA,QACxDP,CAAA,CAAA,CACP,CAAA,CAAA,CACD,CAAA,EACD,CAEF,EAEaC,EAAyBS,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAShCP,EAAgBO,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBL,EAAgBK,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}