@bikdotai/bik-component-library 0.0.388-beta.12 → 0.0.388-beta.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/input-with-vars/InputWithVariables.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),d=require("../../constants/Theme.js"),t=require("../add-variableV2/AddVariableBox.styled.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),d=require("../../constants/Theme.js"),t=require("../add-variableV2/AddVariableBox.styled.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../input/Input.js"),o=require("../TypographyStyle.js"),n=require("../add-variableV2/AddVariableV2SideModal.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?d.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{let{addVarBoxRight:d,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:h,onlyVariables:p,placeHolder:T,showAddButton:j=!0,showHelp:x,showSideVariablePanel:y,errorMessage:f,showSideModal:S}=r;const m=l.useRef(null),[q,w]=l.useState(!1),[A]=l.useState(i.v4()),[O,C]=l.useState(),[B,N]=l.useState(g),[M,k]=l.useState(!1),[I,F]=l.useState(!1),[L,E]=l.useState(f||"");return l.useEffect((()=>{O&&O.actualValue&&N(c?e=>({actualValue:e.actualValue+O.actualValue,variableType:"string"}):e=>({actualValue:O.actualValue,variableType:O.variableType,needsFetching:O.needsFetching}))}),[O]),l.useEffect((()=>{b(B)}),[B]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(B.actualValue)},{children:[e.jsx(
|
|
6
|
+
`;exports.InputWithVariables=r=>{let{addVarBoxRight:d,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:h,onlyVariables:p,placeHolder:T,showAddButton:j=!0,showHelp:x,showSideVariablePanel:y,errorMessage:f,showSideModal:S}=r;const m=l.useRef(null),[q,w]=l.useState(!1),[A]=l.useState(i.v4()),[O,C]=l.useState(),[B,N]=l.useState(g),[M,k]=l.useState(!1),[I,F]=l.useState(!1),[L,E]=l.useState(f||"");return l.useEffect((()=>{O&&O.actualValue&&N(c?e=>({actualValue:e.actualValue+O.actualValue,variableType:"string"}):e=>({actualValue:O.actualValue,variableType:O.variableType,needsFetching:O.needsFetching}))}),[O]),l.useEffect((()=>{b(B)}),[B]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(B.actualValue)},{children:[e.jsx(u.Input,{id:A,ref:m,skipFocus:!0,textControl:!0,isActive:q,value:B.actualValue,validate:e=>[!0,""],errorMessage:L,placeholder:T||"Add a value",onChangeText:(e,a)=>{if(E(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||N({actualValue:"",variableType:"string"})}else N(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;w(!0),F(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||M||k(!0)},onBlur:e=>{var a,l,r,i,d,t,s;null==h||h(e,B),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(m.current&&m.current.focus(),w(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?w(!0):(w(!1),k(!1),F(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[B.actualValue&&x&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${B.variableType}`})})),j&&I&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(t.AddVariableStyled,Object.assign({right:d,id:"addVar",onClick:()=>{k(!M)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!y&&M&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:O,setVariableValue:C,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})),y&&M&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:M,setShowVariable:()=>{k(!1)},placeholder:"Add a variable",customTrigger:e=>{C({actualValue:e.actualValue,variableType:"string"}),N(e)},onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max 16MB":"Pdf format a document • Max 100MB"})]})),e.jsxs("div",Object.assign({style:{marginBottom:16}},{children:[e.jsx(l.BodyRegular,{children:"Media"}),e.jsx(s.InputWithVariables,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&x(t.actualValue)},showAddButton:h===r.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(l.BodyCaption,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(t.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:c.default,onClick:()=>x()})}))]}))]}))}))};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as o}from"react";import t from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableStyled as u}from"../add-variableV2/AddVariableBox.styled.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{
|
|
1
|
+
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as o}from"react";import t from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableStyled as u}from"../add-variableV2/AddVariableBox.styled.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{Input as v}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";import{AddVariableV2SideModal as g}from"../add-variableV2/AddVariableV2SideModal.js";const h=t=>{let{addVarBoxRight:n,allowMix:h,onChange:m,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S,errorMessage:A,showSideModal:N}=t;const B=i(null),[C,O]=d(!1),[k]=d(s()),[M,F]=d(),[I,L]=d(V),[q,Z]=d(!1),[$,z]=d(!1),[E,H]=d(A||"");return o((()=>{M&&M.actualValue&&L(h?e=>({actualValue:e.actualValue+M.actualValue,variableType:"string"}):e=>({actualValue:M.actualValue,variableType:M.variableType,needsFetching:M.needsFetching}))}),[M]),o((()=>{m(I)}),[I]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[l(v,{id:k,ref:B,skipFocus:!0,textControl:!0,isActive:C,value:I.actualValue,validate:e=>[!0,""],errorMessage:E,placeholder:j||"Add a value",onChangeText:(e,a)=>{if(H(""),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||L({actualValue:"",variableType:"string"})}else L(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;O(!0),z(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||q||Z(!0)},onBlur:e=>{var a,l,r,i,d,o,t;null==y||y(e,I),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(o=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(B.current&&B.current.focus(),O(!0)):"Search..."===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?O(!0):(O(!1),Z(!1),z(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&w&&l("div",Object.assign({style:{marginTop:4}},{children:l(p,{children:`This value is of type ${I.variableType}`})})),x&&$&&l("div",Object.assign({style:{marginTop:A?"-24px":"0px"}},{children:l(u,Object.assign({right:n,id:"addVar",onClick:()=>{Z(!q)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&q&&l(c,{data:T,showVariable:!0,setShowVariable:()=>{Z(!1)},variableValue:M,setVariableValue:F,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})),S&&q&&l(g,{zIndex:2e3,data:null!=T?T:[],showVariable:q,setShowVariable:()=>{Z(!1)},placeholder:"Add a variable",customTrigger:e=>{F({actualValue:e.actualValue,variableType:"string"}),L(e)},onSearchBlur:e=>{var a,l,r,i,d,o;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})},b=t.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?n.stroke.brand:"black"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max 16MB":"Pdf format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(n,{children:"Media"}),e(a,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&y(t.actualValue)},showAddButton:f===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(p,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(i,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:g,onClick:()=>y()})}))]}))]}))}))};export{u as default};
|