@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687

package/dist/cjs/components/TablePagination/TablePagination.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),o=require("../../assets/icons/chevronRight.svg.js");require("../dropdown/DropdownPopover/index.js");var r=require("../dropdown/Dropdown.js");require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js");var t=require("../TypographyStyle.js"),s=require("../../constants/Theme.js");require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var i=require("./TablePagination.styled.js");exports.TablePagination=d=>{let{pageNumber:a,pageSize:l,totalRows:c,updatePageNumber:p,updatePageSize:u,hidePageSizeOptions:j,showTotalText:g}=d;const h=s.DEFAULT_THEME.colorsV2,w=(a-1)*l+1,y=(a-1)*l+l,m=Math.ceil(c/l),q=1==m;let x=[];x=m>=5?a===m?[a-4,a-3,a-2,a-1,a]:1===a?[a,a+1,a+2,a+3,a+4]:2===a?[a-1,a,a+1,a+2,a+3]:a===m-1?[a-3,a-2,a-1,a,a+1]:[a-2,a-1,a,a+1,a+2]:Array.from({length:m},((e,n)=>n+1));const b=[{label:"5 rows per page",value:"5",selected:5===l},{label:"10 rows per page",value:"10",selected:10===l},{label:"20 rows per page",value:"20",selected:20===l}];return e.jsxs(i.StyledTablePaginationContainer,{children:[!j&&e.jsx("div",{children:e.jsx(r.Dropdown,{size:"small",options:b,onSelect:u,width:"162px"})}),e.jsxs("div",Object.assign({className:"paging__container"},{children:[!j&&c&&e.jsxs(t.BodySecondary,Object.assign({style:{color:h.content.placeholder}},{children:["Showing ",w,"-",y>c?c:y," of"," ",c," results"]})),e.jsxs("div",Object.assign({className:"pages__buttons-container"},{children:[!q&&e.jsx(i.StyledPagingContainer,Object.assign({active:!1,onClick:()=>{1!==a&&p(Math.max(a-1,1))},disabled:1===a},{children:e.jsx(n.default,{color:h.content.secondary,height:14,width:14})})),x.map((n=>e.jsx(i.StyledPagingContainer,Object.assign({active:n==a,onClick:()=>p(n),style:{display:1==n&&c<=l?"none":"flex"}},{children:e.jsx(t.BodySecondary,Object.assign({style:{color:n==a?h.content.primaryInverse:h.content.secondary}},{children:n}))}),n))),!q&&e.jsx(i.StyledPagingContainer,Object.assign({isLast:!0,active:!1,onClick:()=>{a!==m&&p(Math.min(a+1,m))},disabled:a===m},{children:e.jsx(o.default,{color:h.content.secondary,height:14,width:14})}))]})),j&&c&&g&&e.jsxs(t.BodySecondary,Object.assign({style:{color:h.content.placeholder}},{children:["Showing ",w,"-",y>c?c:y," of"," ",c," results"]}))]}))]})};

package/dist/cjs/components/TablePagination/TablePagination.styled.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledTablePaginationContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPagingContainer: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+    isLast?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/dist/cjs/components/TablePagination/TablePagination.styled.js

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const n=o.default.div`
+	background-color: unset !important;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	margin: 0 16px;
+
+	.paging__container {
+		display: flex;
+		margin-top: 8px;
+		margin-bottom: 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.pages__buttons-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
+		border: 1px solid ${t.DEFAULT_THEME.colorsV2.stroke.primary};
+		border-radius: 4px;
+		cursor: pointer;
+	}
+`,i=o.default.div`
+	background: ${e=>e.active?t.DEFAULT_THEME.colorsV2.background.brand:"none"};
+	width: 32px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-right: ${e=>e.isLast?"none":`1px solid ${t.DEFAULT_THEME.colorsV2.stroke.primary}`};
+	&:hover {
+		cursor: ${e=>e.disabled?"not-allowed":"pointer"};
+	}
+`;exports.StyledPagingContainer=i,exports.StyledTablePaginationContainer=n;

package/dist/cjs/components/TablePagination/TablePaginationCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TablePaginationProps } from "./TablePagination";
+export declare const TablePaginationCardStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & {
+    removeBorder?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TablePaginationCard: React.FC<TablePaginationProps>;

package/dist/cjs/components/TablePagination/TablePaginationCard.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled/base"),c=require("react/jsx-runtime"),a=require("./TablePagination.js"),b=require("../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const t=n(e).default("div","production"===process.env.NODE_ENV?{target:"exfv5q90"}:{target:"exfv5q90",label:"TablePaginationCardStyled"})("background:",b.COLORS.surface.standard,";border:",(e=>e.removeBorder?0:1),"px solid ",b.COLORS.stroke.primary,";border-radius:4px;display:flex;justify-content:center;margin:auto;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlUGFnaW5hdGlvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvRCIsImZpbGUiOiJUYWJsZVBhZ2luYXRpb25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgVGFibGVQYWdpbmF0aW9uLCB9IGZyb20gXCIuL1RhYmxlUGFnaW5hdGlvblwiO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUYWJsZVBhZ2luYXRpb25DYXJkU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdGJhY2tncm91bmQ6ICR7Q09MT1JTLnN1cmZhY2Uuc3RhbmRhcmR9O1xuXHRib3JkZXI6ICR7KHByb3BzKSA9PiAocHJvcHMucmVtb3ZlQm9yZGVyID8gMCA6IDEpfXB4IHNvbGlkXG5cdFx0JHtDT0xPUlMuc3Ryb2tlLnByaW1hcnl9O1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdGRpc3BsYXk6IGZsZXg7XG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRtYXJnaW46IGF1dG87XG5gO1xyXG5leHBvcnQgY29uc3QgVGFibGVQYWdpbmF0aW9uQ2FyZCA9IChwcm9wcykgPT4ge1xyXG4gICAgcmV0dXJuIChfanN4KFRhYmxlUGFnaW5hdGlvbkNhcmRTdHlsZWQsIE9iamVjdC5hc3NpZ24oeyByZW1vdmVCb3JkZXI6IHByb3BzLnJlbW92ZUJvcmRlciB9LCB7IGNoaWxkcmVuOiBfanN4KFRhYmxlUGFnaW5hdGlvbiwgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMpKSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWJsZVBhZ2luYXRpb25DYXJkLmpzLm1hcCJdfQ== */"));exports.TablePaginationCard=e=>c.jsx(t,Object.assign({removeBorder:e.removeBorder},{children:c.jsx(a.TablePagination,Object.assign({},e))})),exports.TablePaginationCardStyled=t;

package/dist/cjs/components/TablePagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TablePagination';
+export * from './TablePaginationCard';

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

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

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.d.ts

@@ -0,0 +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;
+} & {
+    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;
+}, 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;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),b=require("../../constants/Theme.js");function e(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}var l=e(c);const d=l.default("div","production"===process.env.NODE_ENV?{target:"e91dva42"}:{target:"e91dva42",label:"Container"})("background:",b.COLORS.surface.standard,";border:",(c=>c.isError?2:1),"px solid ",(c=>c.isError?b.COLORS.stroke.negative.vibrant:b.COLORS.stroke.primary),";border-radius:4px;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbUVkaXRvci5zdHlsZWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRW9DIiwiZmlsZSI6IkN1c3RvbUVkaXRvci5zdHlsZWQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5zdXJmYWNlLnN0YW5kYXJkfTtcblx0Ym9yZGVyOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzRXJyb3IgPyAyIDogMSl9cHggc29saWRcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaXNFcnJvciA/IENPTE9SUy5zdHJva2UubmVnYXRpdmUudmlicmFudCA6IENPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcbmA7XHJcbmV4cG9ydCBjb25zdCBUZXh0U3BhY2UgPSBzdHlsZWQudGV4dGFyZWEgYFxuXHR3aWR0aDogMTAwJTtcblxuXHRib3JkZXI6IDA7XG5cdHBhZGRpbmc6IDEycHggMTZweDtcblx0cmVzaXplOiBub25lO1xuXHRjb2xvcjogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyOiAwO1xuXHRcdG91dGxpbmU6IDA7XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRnYXA6IDhweDtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUN1c3RvbUVkaXRvci5zdHlsZWQuanMubWFwIl19 */")),t=l.default("textarea","production"===process.env.NODE_ENV?{target:"e91dva41"}:{target:"e91dva41",label:"TextSpace"})("width:100%;border:0;padding:12px 16px;resize:none;color:",b.COLORS.content.primary,";&:focus-within{border:0;outline:0;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbUVkaXRvci5zdHlsZWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlDIiwiZmlsZSI6IkN1c3RvbUVkaXRvci5zdHlsZWQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5zdXJmYWNlLnN0YW5kYXJkfTtcblx0Ym9yZGVyOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzRXJyb3IgPyAyIDogMSl9cHggc29saWRcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaXNFcnJvciA/IENPTE9SUy5zdHJva2UubmVnYXRpdmUudmlicmFudCA6IENPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcbmA7XHJcbmV4cG9ydCBjb25zdCBUZXh0U3BhY2UgPSBzdHlsZWQudGV4dGFyZWEgYFxuXHR3aWR0aDogMTAwJTtcblxuXHRib3JkZXI6IDA7XG5cdHBhZGRpbmc6IDEycHggMTZweDtcblx0cmVzaXplOiBub25lO1xuXHRjb2xvcjogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyOiAwO1xuXHRcdG91dGxpbmU6IDA7XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRnYXA6IDhweDtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUN1c3RvbUVkaXRvci5zdHlsZWQuanMubWFwIl19 */")),a=l.default("div","production"===process.env.NODE_ENV?{target:"e91dva40"}:{target:"e91dva40",label:"OuterContainer"})("production"===process.env.NODE_ENV?{name:"3w0yoi",styles:"display:flex;flex-direction:column;gap:8px"}:{name:"3w0yoi",styles:"display:flex;flex-direction:column;gap:8px",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbUVkaXRvci5zdHlsZWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ5QyIsImZpbGUiOiJDdXN0b21FZGl0b3Iuc3R5bGVkLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0YmFja2dyb3VuZDogJHtDT0xPUlMuc3VyZmFjZS5zdGFuZGFyZH07XG5cdGJvcmRlcjogJHsocHJvcHMpID0+IChwcm9wcy5pc0Vycm9yID8gMiA6IDEpfXB4IHNvbGlkXG5cdFx0JHsocHJvcHMpID0+IHByb3BzLmlzRXJyb3IgPyBDT0xPUlMuc3Ryb2tlLm5lZ2F0aXZlLnZpYnJhbnQgOiBDT0xPUlMuc3Ryb2tlLnByaW1hcnl9O1xuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5gO1xyXG5leHBvcnQgY29uc3QgVGV4dFNwYWNlID0gc3R5bGVkLnRleHRhcmVhIGBcblx0d2lkdGg6IDEwMCU7XG5cblx0Ym9yZGVyOiAwO1xuXHRwYWRkaW5nOiAxMnB4IDE2cHg7XG5cdHJlc2l6ZTogbm9uZTtcblx0Y29sb3I6ICR7Q09MT1JTLmNvbnRlbnQucHJpbWFyeX07XG5cblx0Jjpmb2N1cy13aXRoaW4ge1xuXHRcdGJvcmRlcjogMDtcblx0XHRvdXRsaW5lOiAwO1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgT3V0ZXJDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0Z2FwOiA4cHg7XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1DdXN0b21FZGl0b3Iuc3R5bGVkLmpzLm1hcCJdfQ== */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}});exports.Container=d,exports.OuterContainer=a,exports.TextSpace=t;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { EditorActionTypes } from './WhatsAppTextEditorHeader';
+export type CustomEditorProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    onChange?: (text: string, html: string) => void;
+    text?: string;
+    RightComponent?: React.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;
+};
+export type CustomEditorRef = {
+    addTextOrWrap: (textToAdd: string) => {
+        text: string;
+        html: string;
+    };
+    addText: (textToAdd: string) => {
+        text: string;
+        html: string;
+    };
+    get: () => string;
+    setCaretPosition(caretPos: number): void;
+};
+export declare const WhatsAppTextEditor: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    onChange?: ((text: string, html: string) => void) | undefined;
+    text?: string | undefined;
+    RightComponent?: React.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.RefAttributes<CustomEditorRef>>;

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

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

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

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