@bikdotai/bik-component-library 0.0.687-beta.7 → 0.0.687-beta.9

package/dist/cjs/components/TypographyStyle.d.ts

@@ -0,0 +1,117 @@
+import * as styled_components from 'styled-components';
+
+declare const TitleXlarge: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TitleLarge: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TitleMedium: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const SmallRegular: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TitleRegular: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TitleSmall: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const Display: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodyLarge: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodyPrimary: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodySecondary: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const ButtonRegularAI: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+    disabled?: boolean | undefined;
+}, never>;
+declare const BodyPrimaryLink: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodySecondaryLink: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodyCaption: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const AiBodyCaption: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodyTiny: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const AiBodyTiny: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const ButtonLarge: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const ButtonLargeAI: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const ButtonRegular: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const SubHeading: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodyRegular: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const Caption: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TextPlaceholder: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const TitleFour: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const BodySmall: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const CaptionBold: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+declare const Tiny: styled_components.StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+
+export { AiBodyCaption, AiBodyTiny, BodyCaption, BodyLarge, BodyPrimary, BodyPrimaryLink, BodyRegular, BodySecondary, BodySecondaryLink, BodySmall, BodyTiny, ButtonLarge, ButtonLargeAI, ButtonRegular, ButtonRegularAI, Caption, CaptionBold, Display, SmallRegular, SubHeading, TextPlaceholder, Tiny, TitleFour, TitleLarge, TitleMedium, TitleRegular, TitleSmall, TitleXlarge };

package/dist/cjs/components/TypographyStyle.js

@@ -0,0 +1,295 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const n=e=>e+"px",l=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleXLarge.fontWeight};
+	font-size: ${n(t.FONTS.titleXLarge.fontSize)};
+	line-height: ${n(t.FONTS.titleXLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,r=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleLarge.fontWeight};
+	font-size: ${n(t.FONTS.titleLarge.fontSize)};
+	line-height: ${n(t.FONTS.titleLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,a=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleMedium.fontWeight};
+	font-size: ${n(t.FONTS.titleMedium.fontSize)};
+	line-height: ${n(t.FONTS.titleMedium.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,f=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.title4.fontWeight};
+	font-size: ${n(t.FONTS.title4.fontSize)};
+	line-height: ${n(t.FONTS.title4.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,d=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleRegular.fontWeight};
+	font-size: ${n(t.FONTS.titleRegular.fontSize)};
+	line-height: ${n(t.FONTS.titleRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,b=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.titleSmall.fontWeight};
+	font-size: ${n(t.FONTS.titleSmall.fontSize)};
+	line-height: ${n(t.FONTS.titleSmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,c=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.display.fontWeight};
+	font-size: ${n(t.FONTS.display.fontSize)};
+	line-height: ${n(t.FONTS.display.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,O=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyPrimary.fontWeight};
+	font-size: ${n(t.FONTS.bodyLarge.fontSize)};
+	line-height: ${n(t.FONTS.bodyLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,g=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyPrimary.fontWeight};
+	font-size: ${n(t.FONTS.bodyPrimary.fontSize)};
+	line-height: ${n(t.FONTS.bodyPrimary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,h=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodySecondary.fontWeight};
+	font-size: ${n(t.FONTS.bodySecondary.fontSize)};
+	line-height: ${n(t.FONTS.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,S=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodySecondary.fontWeight};
+	font-size: ${n(t.FONTS.bodySecondary.fontSize)};
+	line-height: ${n(t.FONTS.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;
+`,p=o.default(g)`
+	text-decoration: underline;
+	color: ${t.COLORS.content.brand};
+	text-decoration-color: ${t.COLORS.content.brand};
+	cursor: pointer;
+`,w=o.default(h)`
+	text-decoration: underline;
+	color: ${t.COLORS.content.brand};
+	text-decoration-color: ${t.COLORS.content.brand};
+	cursor: pointer;
+`,y=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.caption.fontWeight};
+	font-size: ${n(t.FONTS.caption.fontSize)};
+	line-height: ${n(t.FONTS.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;
+`,x=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.caption.fontWeight};
+	font-size: ${n(t.FONTS.caption.fontSize)};
+	line-height: ${n(t.FONTS.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;
+`,$=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.tiny.fontWeight};
+	font-size: ${n(t.FONTS.tiny.fontSize)};
+	line-height: ${n(t.FONTS.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,s=o.default.div`
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.tiny.fontWeight};
+	font-size: ${n(t.FONTS.tiny.fontSize)};
+	line-height: ${n(t.FONTS.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;
+`,m=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.buttonLarge.fontWeight};
+	font-size: ${n(t.FONTS.buttonLarge.fontSize)};
+	line-height: ${n(t.FONTS.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,u=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.buttonLarge.fontWeight};
+	font-size: ${n(t.FONTS.buttonLarge.fontSize)};
+	line-height: ${n(t.FONTS.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;
+`,k=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.buttonRegular.fontWeight};
+	font-size: ${n(t.FONTS.buttonRegular.fontSize)};
+	line-height: ${n(t.FONTS.buttonRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,T=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.subHeading.fontWeight};
+	font-size: ${n(t.FONTS.subHeading.fontSize)};
+	line-height: ${n(t.FONTS.subHeading.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,v=o.default.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodyRegular.fontWeight};
+	font-size: ${n(t.FONTS.bodyRegular.fontSize)};
+	line-height: ${n(t.FONTS.bodyRegular.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,F=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.caption.fontWeight};
+	font-size: ${n(t.FONTS.caption.fontSize)};
+	line-height: ${n(t.FONTS.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,N=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.textPlaceholder.fontWeight};
+	font-size: ${n(t.FONTS.textPlaceholder.fontSize)};
+	line-height: ${n(t.FONTS.textPlaceholder.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,L=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.title4.fontWeight};
+	font-size: ${n(t.FONTS.title4.fontSize)};
+	line-height: ${n(t.FONTS.title4.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,z=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.bodySmall.fontWeight};
+	font-size: ${n(t.FONTS.bodySmall.fontSize)};
+	line-height: ${n(t.FONTS.bodySmall.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,R=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.captionBold.fontWeight};
+	font-size: ${n(t.FONTS.captionBold.fontSize)};
+	line-height: ${n(t.FONTS.captionBold.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,C=o.default.div`
+	font-family: Inter;
+	color: ${t.COLORS.text.primary};
+	font-weight: ${t.FONTS.tiny.fontWeight};
+	font-size: ${n(t.FONTS.tiny.fontSize)};
+	line-height: ${n(t.FONTS.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`;exports.AiBodyCaption=x,exports.AiBodyTiny=s,exports.BodyCaption=y,exports.BodyLarge=O,exports.BodyPrimary=g,exports.BodyPrimaryLink=p,exports.BodyRegular=v,exports.BodySecondary=h,exports.BodySecondaryLink=w,exports.BodySmall=z,exports.BodyTiny=$,exports.ButtonLarge=m,exports.ButtonLargeAI=u,exports.ButtonRegular=k,exports.ButtonRegularAI=S,exports.Caption=F,exports.CaptionBold=R,exports.Display=c,exports.SmallRegular=f,exports.SubHeading=T,exports.TextPlaceholder=N,exports.Tiny=C,exports.TitleFour=L,exports.TitleLarge=r,exports.TitleMedium=a,exports.TitleRegular=d,exports.TitleSmall=b,exports.TitleXlarge=l;

package/dist/cjs/components/WhatsAppTextEditor/CustomEditor.styled.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const i=o.default.div`
+	background: ${r.COLORS.surface.standard};
+	border: ${e=>e.isError?2:1}px solid
+		${e=>e.isError?r.COLORS.stroke.negative.vibrant:r.COLORS.stroke.primary};
+	border-radius: 4px;
+`,a=o.default.textarea`
+	width: 100%;
+
+	border: 0;
+	padding: 12px 16px;
+	resize: none;
+	color: ${r.COLORS.content.primary};
+
+	&:focus-within {
+		border: 0;
+		outline: 0;
+	}
+`,n=o.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`;exports.Container=i,exports.OuterContainer=n,exports.TextSpace=a;

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

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { EditorActionTypes } from './WhatsAppTextEditorHeader.js';
+
+type CustomEditorProps = React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    onChange?: (text: string, html: string) => void;
+    text?: string;
+    RightComponent?: React__default.FC;
+    error?: string;
+    limit?: number;
+    rows?: number;
+    actions?: EditorActionTypes[];
+    /**
+     * Calls only for editor only error, not for errors coming from outside
+     */
+    onError?: (err: string) => void;
+    onClickVariable?: (variable: string) => void;
+};
+type CustomEditorRef = {
+    addTextOrWrap: (textToAdd: string) => {
+        text: string;
+        html: string;
+    };
+    addText: (textToAdd: string) => {
+        text: string;
+        html: string;
+    };
+    get: () => string;
+    setCaretPosition(caretPos: number): void;
+};
+declare const WhatsAppTextEditor: React__default.ForwardRefExoticComponent<React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    onChange?: ((text: string, html: string) => void) | undefined;
+    text?: string | undefined;
+    RightComponent?: React__default.FC<{}> | undefined;
+    error?: string | undefined;
+    limit?: number | undefined;
+    rows?: number | undefined;
+    actions?: EditorActionTypes[] | undefined;
+    /**
+     * Calls only for editor only error, not for errors coming from outside
+     */
+    onError?: ((err: string) => void) | undefined;
+    onClickVariable?: ((variable: string) => void) | undefined;
+} & React__default.RefAttributes<CustomEditorRef>>;
+
+export { WhatsAppTextEditor };
+export type { CustomEditorProps, CustomEditorRef };

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditor.js

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

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

@@ -0,0 +1,24 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+import React__default from 'react';
+
+declare const CustomRightBorder: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React__default.ElementType<any> | undefined;
+}, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare enum EditorActionTypes {
+    'BOLD' = "BOLD",
+    'ITALIC' = "ITALIC",
+    'STRIKETHROUGH' = "STRIKETHROUGH",
+    'EMOJI' = "EMOJI"
+}
+type WhatsAppTextEditorHeaderProps = {
+    onActionSelect: (actionType: EditorActionTypes) => void;
+    RightComponent?: React__default.FC;
+    onEmojiClick?: (emoji: string) => void;
+    actions?: EditorActionTypes[];
+};
+declare const WhatsAppTextEditorHeader: React__default.ForwardRefExoticComponent<WhatsAppTextEditorHeaderProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+export { CustomRightBorder, EditorActionTypes, WhatsAppTextEditorHeader };
+export type { WhatsAppTextEditorHeaderProps };

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@emotion/styled"),r=require("react"),i=require("../../hooks/useOutside.js"),o=require("../../constants/Theme.js"),s=require("../../assets/icons/bold.svg.js"),n=require("../../assets/icons/emoji.svg.js"),d=require("../../assets/icons/italic.svg.js"),l=require("../../assets/icons/strikeThrough.svg.js"),c=require("../tooltips/Tooltip.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,i.get?i:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var p=a(t),x=a(r);let h=()=>e.jsx(e.Fragment,{});"undefined"!=typeof window&&Promise.resolve().then((function(){return u(require("emoji-picker-react"))})).then((e=>{h=e.default}));const j=e=>e?o.COLORS.background.inverseLight:o.COLORS.content.placeholder,O=p.default.div`
+	background: ${o.COLORS.surface.subdued};
+	border-bottom: 1px solid ${o.COLORS.stroke.primary};
+	display: flex;
+	flex-direction: row;
+	padding: 8px 12px;
+	align-items: center;
+	border-radius: 4px 4px 0px 0px;
+	gap: 6px;
+	position: relative;
+`,f=p.default.div`
+	width: 2px;
+	height: 12px;
+	background: #e0e0e0;
+`,g=p.default.div`
+	padding: 2px 6px;
+	background: ${e=>e.active?o.COLORS.background.inactive:"transparent"};
+	border-radius: 4px;
+	cursor: pointer;
+	display: flex;
+	:hover {
+		background-color: rgba(0, 0, 0, 0.03);
+		padding: 3px 6px;
+	}
+`,I=p.default.div`
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	justify-content: end;
+`,b=p.default.div`
+	position: absolute;
+	top: calc(100% + 8px);
+	z-index: 1;
+`;var m=(e=>(e.BOLD="BOLD",e.ITALIC="ITALIC",e.STRIKETHROUGH="STRIKETHROUGH",e.EMOJI="EMOJI",e))(m||{});const T=x.default.forwardRef((({onActionSelect:t,RightComponent:o,onEmojiClick:a,actions:u},p)=>{const x=r.useRef(null),[m,T]=r.useState({BOLD:!1,ITALIC:!1,STRIKETHROUGH:!1,EMOJI:!1}),v=r.useCallback((()=>{T((e=>({...e,EMOJI:!1})))}),[m]);function E(e,r){e.preventDefault?.(),"EMOJI"===r&&T((e=>({...e,EMOJI:!m.EMOJI}))),t(r)}return i.useOutside(x,(()=>{v()})),u?.length||o?e.jsxs(O,{children:[u?.includes("EMOJI")&&e.jsxs(e.Fragment,{children:[e.jsx(c.Tooltip,{body:"Emoji",placement:"bottom",children:e.jsx(g,{style:{marginLeft:0},active:!!m.EMOJI,onClick:e=>E(e,"EMOJI"),children:e.jsx(n.default,{width:16,height:16,color:j(m.EMOJI)})})}),m.EMOJI&&e.jsx(b,{ref:x,children:e.jsx(h,{onEmojiClick:e=>{v(),a?.(e.emoji)}})})]}),u?.includes("BOLD")&&e.jsxs(e.Fragment,{children:[e.jsx(f,{}),e.jsx(c.Tooltip,{body:"Bold",placement:"bottom",children:e.jsx(g,{active:!!m.BOLD,onClick:e=>E(e,"BOLD"),children:e.jsx(s.default,{width:10,height:17,color:j(m.BOLD)})})})]}),u?.includes("ITALIC")&&e.jsxs(e.Fragment,{children:[e.jsx(f,{}),e.jsx(c.Tooltip,{body:"Italics",placement:"bottom",children:e.jsx(g,{onClick:e=>E(e,"ITALIC"),active:!!m.ITALIC,children:e.jsx(d.default,{width:9,height:16,color:j(m.ITALIC)})})})]}),u?.includes("STRIKETHROUGH")&&e.jsxs(e.Fragment,{children:[e.jsx(f,{}),e.jsx(c.Tooltip,{body:"Strikethrough",placement:"bottom",children:e.jsx(g,{active:!!m.STRIKETHROUGH,style:{borderRight:0},onClick:e=>E(e,"STRIKETHROUGH"),children:e.jsx(l.default,{width:12,height:18,color:j(m.STRIKETHROUGH)})})})]}),e.jsx(I,{children:o&&e.jsx(o,{})})]}):e.jsx(e.Fragment,{})}));T.displayName="WhatsAppTextEditorHeader",exports.CustomRightBorder=f,exports.EditorActionTypes=m,exports.WhatsAppTextEditorHeader=T;

package/dist/cjs/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.d.ts

@@ -0,0 +1,23 @@
+import React__default, { CSSProperties } from 'react';
+import { ButtonProps } from '../button/model.js';
+
+interface StepsDetails {
+    info: string;
+    hideBullet?: boolean;
+}
+declare const AccessTokenTroubleshootDialog: React__default.FC<{
+    onCancel: () => void;
+    titleIconContainerStyles?: CSSProperties;
+    title: string;
+    TitleIcon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+    desc: string;
+    primaryButton: ButtonProps | undefined;
+    isModalOpen: boolean;
+    stepsDetails?: StepsDetails[];
+    titleIconColor?: string;
+    content?: string;
+    secondaryButtonText?: string;
+}>;
+
+export { AccessTokenTroubleshootDialog };
+export type { StepsDetails };

package/dist/cjs/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/alert.svg.js"),s=require("../../constants/Theme.js"),l=require("../modals/styledModal.js"),n=require("../TypographyStyle.js"),o=require("./AccessTokenTroubleshootDialog.styles.js");const r=({info:t,hideBullet:s,last:l})=>e.jsxs(o.EachStep,{last:l,children:[!s&&e.jsx(o.BulletWrapper,{children:e.jsx(o.Bullet,{})}),e.jsx(n.BodyCaption,{dangerouslySetInnerHTML:{__html:t}})]});exports.AccessTokenTroubleshootDialog=({onCancel:i,titleIconContainerStyles:a,isModalOpen:c,title:d,desc:h,primaryButton:u,TitleIcon:j,stepsDetails:y,titleIconColor:x,secondaryButtonText:p,content:T})=>e.jsxs(l.StyledModal,{open:!!c,primaryButton:u?{...u}:void 0,secondaryButton:{buttonText:p??"Cancel",onClick:i,buttonType:"tertiaryGray"},onClose:i,children:[e.jsxs(o.Header,{children:[e.jsx(o.IconContainer,{style:{...a},children:j?e.jsx(j,{width:18,height:18,color:x}):e.jsx(t.default,{width:18,height:18,color:s.COLORS.content.negative})}),e.jsx(n.TitleMedium,{children:d})]}),e.jsx(o.Description,{children:e.jsx(n.BodySecondary,{dangerouslySetInnerHTML:{__html:h}})}),e.jsxs(o.StepsContainer,{children:[y&&!!y.length&&e.jsxs(e.Fragment,{children:[e.jsx(n.TitleSmall,{children:"Follow the steps:"}),y.map(((t,s)=>e.jsx(r,{info:t.info,hideBullet:t.hideBullet,last:y.length-1===s},s)))]}),T&&e.jsx(n.BodySecondary,{dangerouslySetInnerHTML:{__html:T}})]})]});

package/dist/cjs/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.styles.js

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=r(t);const o=i.default.div`
+	display: flex;
+	gap: 12;
+	align-items: center;
+	margin-bottom: 8px;
+	padding: 34px 32px 0px 32px;
+`,p=i.default.div`
+	background-color: ${e.COLORS.background.negative.light};
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 28px;
+	height: 28px;
+	border-radius: 100%;
+	margin-right: 12px;
+`,d=i.default.div`
+	padding-bottom: 32px;
+	border-bottom: 1px solid ${e.COLORS.stroke.primary};
+	margin-left: 32px;
+	margin-right: 40px;
+`,a=i.default.div`
+	padding: 32px;
+	padding-bottom: 24px;
+	border-bottom: 1px solid ${e.COLORS.stroke.primary};
+`,n=i.default.div`
+	padding-top: 12px;
+	padding-bottom: 12px;
+	border-bottom: ${t=>t.last?"0px":"1px"} solid
+		${e.COLORS.stroke.primary};
+	display: flex;
+	gap: 9px;
+`,x=i.default.div`
+	background-color: ${e.COLORS.surface.hovered};
+	width: 14px;
+	height: 14px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 100%;
+`,s=i.default.div`
+	width: 8px;
+	height: 8px;
+	background-color: ${e.COLORS.content.primary};
+	border-radius: 100%;
+`;i.default.img`
+	width: 16px;
+	height: 16px;
+	margin-left: 6px;
+	margin-right: 4px;
+`,exports.Bullet=s,exports.BulletWrapper=x,exports.Description=d,exports.EachStep=n,exports.Header=o,exports.IconContainer=p,exports.StepsContainer=a;

package/dist/cjs/components/accordion/Accordion.d.ts

@@ -0,0 +1,31 @@
+import React__default, { ReactNode } from 'react';
+
+interface AccordionProps {
+    header: JSX.Element | string;
+    caption?: string;
+    children: ReactNode;
+    width?: string;
+    rightActionComponent?: JSX.Element;
+    contentMargin?: string;
+    skipHoverHeader?: boolean;
+    headerPadding?: string;
+    showBorders?: boolean;
+    backgroundColor?: string;
+    refresh?: number | boolean;
+    autoOpen?: boolean;
+    childrenMaxHeight?: number;
+    openDirection?: 'DOWN' | 'UP';
+    headerStyles?: React__default.CSSProperties;
+    onToggleAccordion?: (state: boolean) => void;
+    arrowColor?: string;
+    isOpen?: boolean;
+    buttonLinkText?: string;
+    onButtonLinkClick?: () => void;
+    captionStyle?: React__default.CSSProperties;
+    borderColor?: string;
+    borderRadius?: string;
+}
+declare const BikAccordion: React__default.FC<AccordionProps>;
+
+export { BikAccordion };
+export type { AccordionProps };

package/dist/cjs/components/accordion/Accordion.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../TypographyStyle.js"),o=require("../button/Button.js"),n=require("./Accordion.style.js"),i=require("./AccordionArrow.js");exports.BikAccordion=s=>{const[c,a]=r.useState(!1),d=r.useRef(null),l=r.useRef(null);r.useEffect((()=>{s.autoOpen&&u(s.autoOpen,{})}),[s.autoOpen]),r.useEffect((()=>{void 0!==s.isOpen&&u(s.isOpen,{})}),[s.isOpen]);const u=(e,r)=>{l.current&&d.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==c&&a(e),e?(l.current.style.maxHeight=(s.childrenMaxHeight??l.current.scrollHeight)+"px",d.current.style.transform="rotate(180deg)",d.current.style.transition="transform 0.25s ease-in-out",l.current.style.transition="max-height 0.25s ease-in-out"):(l.current.style.maxHeight="",d.current.style.transform="rotate(0deg)",d.current.style.transition="transform 0.25s ease-in-out",l.current.style.transition="padding 0s"),s.onToggleAccordion?.(e)))};return r.useEffect((()=>{const e=new MutationObserver((()=>{c&&l.current&&(l.current.style.maxHeight=l.current.scrollHeight+"px")}));return l.current&&e.observe(l.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[c]),r.useEffect((()=>{c&&s?.refresh&&l?.current?.scrollHeight&&!s.childrenMaxHeight&&setTimeout((()=>{l.current.style.maxHeight=l.current.scrollHeight+"px"}),100)}),[c,s?.refresh,l?.current?.scrollHeight]),e.jsxs(n.default,{className:"accordion",isActive:c,width:s?.width,contentMargin:s?.contentMargin,headerPadding:s.headerPadding,skipHoverState:s.skipHoverHeader,showBorders:s.showBorders,borderColor:s.borderColor,backgroundColor:s.backgroundColor,openDirection:s.openDirection,borderRadius:s.borderRadius,children:[e.jsxs("div",{className:"accordion__overview "+(c?"active":""),onClick:e=>u(!c,e),onKeyDown:e=>u(!c,e),role:"button",tabIndex:0,children:[!s.rightActionComponent&&e.jsxs("div",{className:"accordion__overview__header",style:s.headerStyles??{},children:[e.jsxs(n.AccordionHeaderGroup,{children:["string"==typeof s.header?e.jsx(t.TitleRegular,{children:s?.header}):s.header,s.buttonLinkText&&e.jsx(o.Button,{buttonText:s.buttonLinkText,buttonType:"text",darkMode:!0,onClick:s.onButtonLinkClick})]}),e.jsx(i.default,{arrowColor:s.arrowColor,isNewIcon:!0,ref:d})]}),s.rightActionComponent&&e.jsxs("div",{className:"accordion__overview__header",children:[e.jsxs("div",{className:"accordion__overview__title-wrapper",children:[e.jsx(i.default,{arrowColor:s.arrowColor,isNewIcon:!0,ref:d}),"string"==typeof s.header?e.jsx(t.TitleRegular,{children:s?.header}):s.header]}),e.jsx("div",{onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0,children:s.rightActionComponent})]}),s?.caption&&e.jsx("div",{className:"accordion__overview__caption",children:e.jsx(t.BodySecondary,{children:e.jsx("div",{style:s.captionStyle,children:s.caption})})})]}),e.jsx("div",{ref:l,className:"accordion__content",children:s.children})]})};