@bikdotai/bik-component-library 0.0.69 → 0.0.73-9.beta-0

package/dist/esm/components/TypographyStyle.js

@@ -1,100 +1,295 @@
-import t from"styled-components";import{COLORS as e,FONTS as i}from"../constants/Theme.js";const o=t=>t+"px",n=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleLarge.fontWeight};
-	font-size: ${o(i.titleLarge.fontSize)};
-	line-height: ${o(i.titleLarge.lineHeight)};
-`,r=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleMedium.fontWeight};
-	font-size: ${o(i.titleMedium.fontSize)};
-	line-height: ${o(i.titleMedium.lineHeight)};
-`,l=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleRegular.fontWeight};
-	font-size: ${o(i.titleRegular.fontSize)};
-	line-height: ${o(i.titleRegular.lineHeight)};
-`,f=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.titleSmall.fontWeight};
-	font-size: ${o(i.titleSmall.fontSize)};
-	line-height: ${o(i.titleSmall.lineHeight)};
-`,g=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.display.fontWeight};
-	font-size: ${o(i.display.fontSize)};
-	line-height: ${o(i.display.lineHeight)};
-`,a=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyLarge.fontSize)};
-	line-height: ${o(i.bodyLarge.lineHeight)};
-`,h=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyPrimary.fontSize)};
-	line-height: ${o(i.bodyPrimary.lineHeight)};
-`,$=t.div`
-	font-family: Inter;
-	color: ${e.content.primary};
-	font-weight: ${i.bodySecondary.fontWeight};
-	font-size: ${o(i.bodySecondary.fontSize)};
-	line-height: ${o(i.bodySecondary.lineHeight)};
-`,c=t(h)`
+import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleXLarge.fontWeight};
+	font-size: ${o(t.titleXLarge.fontSize)};
+	line-height: ${o(t.titleXLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,l=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleLarge.fontWeight};
+	font-size: ${o(t.titleLarge.fontSize)};
+	line-height: ${o(t.titleLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,r=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleMedium.fontWeight};
+	font-size: ${o(t.titleMedium.fontSize)};
+	line-height: ${o(t.titleMedium.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,a=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.title4.fontWeight};
+	font-size: ${o(t.title4.fontSize)};
+	line-height: ${o(t.title4.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,f=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleRegular.fontWeight};
+	font-size: ${o(t.titleRegular.fontSize)};
+	line-height: ${o(t.titleRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,b=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleSmall.fontWeight};
+	font-size: ${o(t.titleSmall.fontSize)};
+	line-height: ${o(t.titleSmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,d=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.display.fontWeight};
+	font-size: ${o(t.display.fontSize)};
+	line-height: ${o(t.display.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,c=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyLarge.fontSize)};
+	line-height: ${o(t.bodyLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,h=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyPrimary.fontSize)};
+	line-height: ${o(t.bodyPrimary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,g=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodySecondary.fontWeight};
+	font-size: ${o(t.bodySecondary.fontSize)};
+	line-height: ${o(t.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,w=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodySecondary.fontWeight};
+	font-size: ${o(t.bodySecondary.fontSize)};
+	line-height: ${o(t.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+	z-index: 1;
+	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	text-fill-color: transparent;
+`,$=e(h)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,y=t($)`
+`,m=e(g)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,d=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
-`,m=t.div`
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.tiny.fontWeight};
-	font-size: ${o(i.tiny.fontSize)};
-	line-height: ${o(i.tiny.lineHeight)};
-`,p=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.buttonLarge.fontWeight};
-	font-size: ${o(i.buttonLarge.fontSize)};
-	line-height: ${o(i.buttonLarge.lineHeight)};
-`,z=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.buttonRegular.fontWeight};
-	font-size: ${o(i.buttonRegular.fontSize)};
-	line-height: ${o(i.buttonRegular.lineHeight)};
-`,s=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.subHeading.fontWeight};
-	font-size: ${o(i.subHeading.fontSize)};
-	line-height: ${o(i.subHeading.lineHeight)};
-`,b=t.div`
-	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
-	font-weight: ${i.bodyRegular.fontWeight};
-	font-size: ${o(i.bodyRegular.fontSize)};
-	line-height: ${o(i.bodyRegular.lineHeight)};
-`,u=t.div`
-	font-family: Inter;
-	color: ${e.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
-`;export{d as BodyCaption,a as BodyLarge,h as BodyPrimary,c as BodyPrimaryLink,b as BodyRegular,$ as BodySecondary,y as BodySecondaryLink,m as BodyTiny,p as ButtonLarge,z as ButtonRegular,u as Caption,g as Display,s as SubHeading,n as TitleLarge,r as TitleMedium,l as TitleRegular,f as TitleSmall};
+`,p=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+	word-break: break-word;
+	overflow-wrap: break-word;
+`,y=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+	z-index: 1;
+	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	text-fill-color: transparent;
+`,x=e.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.tiny.fontWeight};
+	font-size: ${o(t.tiny.fontSize)};
+	line-height: ${o(t.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,k=e.div`
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.tiny.fontWeight};
+	font-size: ${o(t.tiny.fontSize)};
+	line-height: ${o(t.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+	z-index: 1;
+	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	text-fill-color: transparent;
+`,s=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonLarge.fontWeight};
+	font-size: ${o(t.buttonLarge.fontSize)};
+	line-height: ${o(t.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,v=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonLarge.fontWeight};
+	font-size: ${o(t.buttonLarge.fontSize)};
+	line-height: ${o(t.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
+	z-index: 1;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	text-fill-color: transparent;
+`,u=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonRegular.fontWeight};
+	font-size: ${o(t.buttonRegular.fontSize)};
+	line-height: ${o(t.buttonRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,z=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.subHeading.fontWeight};
+	font-size: ${o(t.subHeading.fontSize)};
+	line-height: ${o(t.subHeading.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,L=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyRegular.fontWeight};
+	font-size: ${o(t.bodyRegular.fontSize)};
+	line-height: ${o(t.bodyRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,S=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,H=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.textPlaceholder.fontWeight};
+	font-size: ${o(t.textPlaceholder.fontSize)};
+	line-height: ${o(t.textPlaceholder.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,O=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.title4.fontWeight};
+	font-size: ${o(t.title4.fontSize)};
+	line-height: ${o(t.title4.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,W=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.bodySmall.fontWeight};
+	font-size: ${o(t.bodySmall.fontSize)};
+	line-height: ${o(t.bodySmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,I=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.captionBold.fontWeight};
+	font-size: ${o(t.captionBold.fontSize)};
+	line-height: ${o(t.captionBold.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,R=e.div`
+	font-family: Inter;
+	color: ${i.text.primary};
+	font-weight: ${t.tiny.fontWeight};
+	font-size: ${o(t.tiny.fontSize)};
+	line-height: ${o(t.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`;export{y as AiBodyCaption,k as AiBodyTiny,p as BodyCaption,c as BodyLarge,h as BodyPrimary,$ as BodyPrimaryLink,L as BodyRegular,g as BodySecondary,m as BodySecondaryLink,W as BodySmall,x as BodyTiny,s as ButtonLarge,v as ButtonLargeAI,u as ButtonRegular,w as ButtonRegularAI,S as Caption,I as CaptionBold,d as Display,a as SmallRegular,z as SubHeading,H as TextPlaceholder,R as Tiny,O as TitleFour,l as TitleLarge,r as TitleMedium,f as TitleRegular,b as TitleSmall,n as TitleXlarge};

package/dist/esm/components/WhatsAppTextEditor/CustomEditor.styled.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     isError: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextSpace: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const OuterContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.d.ts

@@ -12,6 +12,7 @@ export type CustomEditorProps = React.TextareaHTMLAttributes<HTMLTextAreaElement
      * Calls only for editor only error, not for errors coming from outside
      */
     onError?: (err: string) => void;
+    onClickVariable?: (variable: string) => void;
 };
 export type CustomEditorRef = {
     addTextOrWrap: (textToAdd: string) => {
@@ -37,4 +38,5 @@ export declare const WhatsAppTextEditor: React.ForwardRefExoticComponent<React.T
      * Calls only for editor only error, not for errors coming from outside
      */
     onError?: ((err: string) => void) | undefined;
+    onClickVariable?: ((variable: string) => void) | undefined;
 } & React.RefAttributes<CustomEditorRef>>;

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import{BaseWhatsappContentLangHelper as l}from"../../helpers/BaseWhatsappContentLang.helper.js";import o,{useRef as i,useImperativeHandle as u,useEffect as c}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as a}from"../TypographyStyle.js";import{OuterContainer as d,Container as v,TextSpace as m}from"./CustomEditor.styled.js";import{EditorActionTypes as h,WhatsAppTextEditorHeader as f}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",g=new l,x={[h.BOLD]:"*",[h.ITALIC]:"_",[h.STRIKETHROUGH]:"~"},T=o.forwardRef(((l,o)=>{var h,T,{onChange:j,text:C,RightComponent:E,error:y,limit:S,onError:H,rows:L,actions:O}=l,R=t(l,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const w=i(null);function b(t){const n=null==w?void 0:w.current;null!=n&&(n.selectionStart?(n.focus(),n.setSelectionRange(t,t)):n.focus())}function W(t){var n,e;let r=null!==(e=null===(n=w.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(w.current&&t){const n=w.current.selectionStart,e=w.current.selectionEnd,l=t;if(n===e)return A(l);{r=g.wrappWildcard(n,e,l,r);const t=g.getHTML(r);return w.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function A(t){var n,e;let r=null!==(e=null===(n=w.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(w.current&&t){const n=w.current.selectionStart;if(n===w.current.selectionEnd)return M(t,n)}return{text:r,html:r}}function M(t,n){var e,r;let l=null!==(r=null===(e=w.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=g.getHTML(l);return w.current.value=l,{text:l,html:o}}return u(o,(()=>({addTextOrWrap:W,addText:A,get(){var t,n;return null!==(n=null===(t=w.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:b}))),c((()=>{if((null==w?void 0:w.current)&&C){w.current.value=C;const t=g.getHTML(C);null==j||j(C,t)}}),[]),c((()=>{var t,n;(null===(t=null==w?void 0:w.current)||void 0===t?void 0:t.value)&&S&&((null===(n=null==w?void 0:w.current)||void 0===n?void 0:n.value.length)>S?null==H||H(p):null==H||H(null!=y?y:""))}),[null===(h=null==w?void 0:w.current)||void 0===h?void 0:h.value.length]),n(d,{children:[n(v,Object.assign({isError:!!y},{children:[e(f,{actions:O,ref:w,onActionSelect:function(t){if((null==x?void 0:x[t])&&w.current){const n=w.current.selectionStart;if(n===w.current.selectionEnd){M(null==x?void 0:x[t],n);const{text:e,html:r}=M(null==x?void 0:x[t],n);b(n+1),null==j||j(e,r)}else{const{text:n,html:e}=W(null==x?void 0:x[t]);null==j||j(n,e)}}},RightComponent:E,onEmojiClick:function(t){const{text:n,html:e}=A(t);null==j||j(n,e)}}),e(m,Object.assign({ref:w,onChange:function(t){const n=t.target.value,e=g.getHTML(n);null==j||j(n,e)}},R,{rows:L}))]})),y&&y!==p?e(a,Object.assign({style:{color:s.content.negative}},{children:y})):e(r,{children:S&&(null==w?void 0:w.current)?n(a,Object.assign({style:{color:y===p||(null===(T=null==w?void 0:w.current)||void 0===T?void 0:T.value.length)>S?s.content.negative:s.content.secondary}},{children:[w.current.value.length,"/",S]})):e(r,{})})]})}));T.displayName="WhatsAppTextEditor";export{T as WhatsAppTextEditor};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as n,jsx as e,Fragment as r}from"react/jsx-runtime";import l from"../../assets/icons/info.svg.js";import{BaseWhatsappContentLangHelper as o}from"../../helpers/BaseWhatsappContentLang.helper.js";import i,{useRef as c,useImperativeHandle as u,useEffect as s}from"react";import{COLORS as a}from"../../constants/Theme.js";import{BodyCaption as d}from"../TypographyStyle.js";import{OuterContainer as v,Container as m,TextSpace as h}from"./CustomEditor.styled.js";import{EditorActionTypes as f,WhatsAppTextEditorHeader as g}from"./WhatsAppTextEditorHeader.js";const p="Character limit reached",x=new o,j={[f.BOLD]:"*",[f.ITALIC]:"_",[f.STRIKETHROUGH]:"~"},C=i.forwardRef(((o,i)=>{var f,C,{onChange:T,onClickVariable:E,text:y,RightComponent:b,error:O,limit:w,onError:H,rows:L,actions:S}=o,R=t(o,["onChange","onClickVariable","text","RightComponent","error","limit","onError","rows","actions"]);const W=c(null);function A(t){const n=null==W?void 0:W.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function I(t){var n,e;let r=null!==(e=null===(n=W.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(W.current&&t){const n=W.current.selectionStart,e=W.current.selectionEnd,l=t;if(n===e)return M(l);{r=x.wrappWildcard(n,e,l,r);const t=x.getHTML(r);return W.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function M(t){var n,e;let r=null!==(e=null===(n=W.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(W.current&&t){const n=W.current.selectionStart;if(n===W.current.selectionEnd)return k(t,n)}return{text:r,html:r}}function k(t,n){var e,r;let l=null!==(r=null===(e=W.current)||void 0===e?void 0:e.value)&&void 0!==r?r:"";l=l.slice(0,n)+t+l.slice(n);const o=x.getHTML(l);return W.current.value=l,{text:l,html:o}}return u(i,(()=>({addTextOrWrap:I,addText:M,get(){var t,n;return null!==(n=null===(t=W.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:A}))),s((()=>{if(null==W?void 0:W.current){W.current.value=y||"";const t=x.getHTML(y||"");null==T||T(y||"",t)}}),[y]),s((()=>{var t,n;(null===(t=null==W?void 0:W.current)||void 0===t?void 0:t.value)&&w&&((null===(n=null==W?void 0:W.current)||void 0===n?void 0:n.value.length)>w?null==H||H(p):null==H||H(null!=O?O:""))}),[null===(f=null==W?void 0:W.current)||void 0===f?void 0:f.value.length]),n(v,{children:[n(m,Object.assign({isError:!!O},{children:[e(g,{actions:S,ref:W,onActionSelect:function(t){if((null==j?void 0:j[t])&&W.current){const n=W.current.selectionStart;if(n===W.current.selectionEnd){k(null==j?void 0:j[t],n);const{text:e,html:r}=k(null==j?void 0:j[t],n);A(n+1),null==T||T(e,r)}else{const{text:n,html:e}=I(null==j?void 0:j[t]);null==T||T(n,e)}}},RightComponent:b,onEmojiClick:function(t){const{text:n,html:e}=M(t);null==T||T(n,e)}}),e(h,Object.assign({ref:W,onChange:function(t){const n=t.target.value,e=x.getHTML(n);null==T||T(n,e)}},R,{rows:L}))]})),O&&O!==p?n("div",Object.assign({style:{display:"flex",gap:6,alignItems:"center"}},{children:[e(l,{width:16,height:16,color:a.content.negative}),e(d,Object.assign({color:a.content.negative},{children:O}))]})):e(r,{children:w&&(null==W?void 0:W.current)?n(d,Object.assign({style:{color:O===p||(null===(C=null==W?void 0:W.current)||void 0===C?void 0:C.value.length)>w?a.content.negative:a.content.secondary}},{children:[W.current.value.length,"/",w]})):e(r,{})})]})}));C.displayName="WhatsAppTextEditor";export{C as WhatsAppTextEditor};

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare const CustomRightBorder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare enum EditorActionTypes {
     'BOLD' = "BOLD",
     'ITALIC' = "ITALIC",