@bikdotai/bik-component-library 0.0.369-beta.16 → 0.0.369-beta.20

package/dist/cjs/components/modals/Modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("./modal.styled.js"),n=require("../../constants/Theme.js"),t=require("../../assets/icons/cross.svg.js");exports.Modal=i=>{var o;return e.jsx(e.Fragment,{children:i.open&&e.jsx("div",Object.assign({id:i.id||"bik-modal"},{children:e.jsx(s.RootContainer,Object.assign({zIndex:i.zIndex,onClick:e=>{i.closeOnOutsideClick&&i.onClose&&i.onClose()}},{children:e.jsx(s.CentralContainer,Object.assign({style:Object.assign({},null!==(o=i.centralContainerStyles)&&void 0!==o?o:{}),width:i.width},{children:e.jsxs(e.Fragment,{children:[!(null==i?void 0:i.hideCrossButton)&&e.jsx(s.CloseButtonContainer,Object.assign({onClick:()=>i.onClose&&i.onClose()},{children:e.jsx(t.default,{height:20,width:20,color:n.COLORS.content.secondary})})),i.children]})}))}))}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("./modal.styled.js"),n=require("../../constants/Theme.js"),o=require("../../assets/icons/cross.svg.js");exports.Modal=t=>{var i;return e.jsx(e.Fragment,{children:t.open&&e.jsx("div",Object.assign({id:t.id||"bik-modal"},{children:e.jsx(s.RootContainer,Object.assign({zIndex:t.zIndex,onClick:e=>{t.closeOnOutsideClick&&t.onClose?t.onClose():e.stopPropagation()}},{children:e.jsx(s.CentralContainer,Object.assign({style:Object.assign({},null!==(i=t.centralContainerStyles)&&void 0!==i?i:{}),onClick:e=>{e.stopPropagation()},width:t.width},{children:e.jsxs(e.Fragment,{children:[!(null==t?void 0:t.hideCrossButton)&&e.jsx(s.CloseButtonContainer,Object.assign({onClick:()=>t.onClose&&t.onClose()},{children:e.jsx(o.default,{height:20,width:20,color:n.COLORS.content.secondary})})),t.children]})}))}))}))})};

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -25,4 +25,4 @@
 		display: flex;
 		align-items: center;
 	}
-`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,T]=t.useState(!1),[k,L]=t.useState(""),[B,E]=t.useState(!1),A=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&E&&E(!0))}))}),[m]),e.jsxs(j,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{E(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(A.current&&A.current.focus(),q(!0)):(q(!1),T(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),T(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:w,setShowVariable:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};
+`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,T]=t.useState(!1),[k,L]=t.useState(""),[B,E]=t.useState(!1),A=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&E&&E(!0))}))}),[m]),e.jsxs(j,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{E(!B),!B&&y&&y("")}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(A.current&&A.current.focus(),q(!0)):(q(!1),T(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),T(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:w,setShowVariable:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:j,hideHeader:u,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!u&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=j?j:[])})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:u,hideHeader:j,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!j&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=null==c?void 0:c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=u?u:[])})}))]})};

package/dist/esm/components/modals/Modal.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as o}from"react/jsx-runtime";import{RootContainer as s,CentralContainer as i,CloseButtonContainer as t}from"./modal.styled.js";import{COLORS as r}from"../../constants/Theme.js";import l from"../../assets/icons/cross.svg.js";const c=c=>{var d;return e(n,{children:c.open&&e("div",Object.assign({id:c.id||"bik-modal"},{children:e(s,Object.assign({zIndex:c.zIndex,onClick:e=>{c.closeOnOutsideClick&&c.onClose&&c.onClose()}},{children:e(i,Object.assign({style:Object.assign({},null!==(d=c.centralContainerStyles)&&void 0!==d?d:{}),width:c.width},{children:o(n,{children:[!(null==c?void 0:c.hideCrossButton)&&e(t,Object.assign({onClick:()=>c.onClose&&c.onClose()},{children:e(l,{height:20,width:20,color:r.content.secondary})})),c.children]})}))}))}))})};export{c as Modal};
+import{jsx as o,Fragment as n,jsxs as s}from"react/jsx-runtime";import{RootContainer as e,CentralContainer as i,CloseButtonContainer as t}from"./modal.styled.js";import{COLORS as r}from"../../constants/Theme.js";import l from"../../assets/icons/cross.svg.js";const c=c=>{var d;return o(n,{children:c.open&&o("div",Object.assign({id:c.id||"bik-modal"},{children:o(e,Object.assign({zIndex:c.zIndex,onClick:o=>{c.closeOnOutsideClick&&c.onClose?c.onClose():o.stopPropagation()}},{children:o(i,Object.assign({style:Object.assign({},null!==(d=c.centralContainerStyles)&&void 0!==d?d:{}),onClick:o=>{o.stopPropagation()},width:c.width},{children:s(n,{children:[!(null==c?void 0:c.hideCrossButton)&&o(t,Object.assign({onClick:()=>c.onClose&&c.onClose()},{children:o(l,{height:20,width:20,color:r.content.secondary})})),c.children]})}))}))}))})};export{c as Modal};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -3,7 +3,7 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[B,L]=a(!1),[A,E]=a(!1),[I,M]=a(!1),[S,D]=a(""),[F,N]=a(!1),z=o(),H=o();return r((()=>{k&&k(O+S)}),[S]),r((()=>{C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(L(!0),O&&N&&N(!0))}))}),[C]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((t,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:L})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a))),(B||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:F,onValueChange:()=>{N(!F)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),F&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{E(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),E(!0)):(E(!1),M(!1))},noErrorHint:!0,validate:e=>[!0,""]}),A&&i(j,Object.assign({ref:H,id:"addVar",onClick:e=>{e.stopPropagation(),M(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),I&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:I,setShowVariable:M,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),E(!1)}})]})},j=l.button`
+`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[B,L]=a(!1),[A,E]=a(!1),[I,M]=a(!1),[S,D]=a(""),[F,N]=a(!1),z=o(),H=o();return r((()=>{k&&k(O+S)}),[S]),r((()=>{C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(L(!0),O&&N&&N(!0))}))}),[C]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((t,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:L})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a))),(B||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:F,onValueChange:()=>{N(!F),!F&&k&&k("")}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),F&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{E(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),E(!0)):(E(!1),M(!1))},noErrorHint:!0,validate:e=>[!0,""]}),A&&i(j,Object.assign({ref:H,id:"addVar",onClick:e=>{e.stopPropagation(),M(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),I&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:I,setShowVariable:M,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),E(!1)}})]})},j=l.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;

package/dist/esm/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import s from"../../assets/icons/arrow_left.svg.js";import o from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{TitleRegular as n,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSCardHeader as m,SMSHeader as h,SMSBubbleContainer as p}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:y,hideHeader:j,display_content:v,onlyTemplateContent:u,size:S}=f;var b;const w=null==g?void 0:g.content;return e(t,{children:[!j&&!u&&r(m,{children:r(n,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!u&&r(h,{children:e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(s,{width:16,height:16,color:l.content.secondary}),r(c,{children:null===(b=g.headers)||void 0===b?void 0:b[0]})]})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(i,{width:16,height:16,color:l.content.secondary}),r(o,{width:16,height:16,color:l.content.secondary})]}))]})}),r(p,Object.assign({size:S},{children:r(d,{size:null!=S?S:"large",content:null!=v?v:a(w,null!=y?y:[])})}))]})};export{f as default};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import s from"../../assets/icons/arrow_left.svg.js";import o from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{TitleRegular as n,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSCardHeader as m,SMSHeader as h,SMSBubbleContainer as p}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:y,hideHeader:j,display_content:v,onlyTemplateContent:u,size:S}=f;var b;const w=null==g?void 0:g.content;return e(t,{children:[!j&&!u&&r(m,{children:r(n,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!u&&r(h,{children:e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(s,{width:16,height:16,color:l.content.secondary}),r(c,{children:null===(b=null==g?void 0:g.headers)||void 0===b?void 0:b[0]})]})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(i,{width:16,height:16,color:l.content.secondary}),r(o,{width:16,height:16,color:l.content.secondary})]}))]})}),r(p,Object.assign({size:S},{children:r(d,{size:null!=S?S:"large",content:null!=v?v:a(w,null!=y?y:[])})}))]})};export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.369-beta.16",
+	"version": "0.0.369-beta.20",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",