@bikdotai/bik-component-library 0.0.49 → 0.0.51--beta.ai-1

package/dist/esm/components/SearchFilter/components/SearchFilterItem.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import"../../tooltips/Tooltip.js";import"../../../constants/Theme.js";import"../../TypographyStyle.js";import"../../analytics-chips-and-dropdowns/CommonStyles.js";import{AnalyticsDropdown as o}from"../../analytics-chips-and-dropdowns/AnalyticsDropdown.js";import"react";import"../../analytics-chips-and-dropdowns/AnalyticsMetric.js";import"../../shimmer/ShimmerComponent/ShimmerStyled.js";import"../../../utils/DateUtils.js";import"../../tag/Tag.js";import"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import"react-bootstrap";import"../../analytics-chips-and-dropdowns/chart/linearChipGroupedChart/LinearChipGroupedChart.styled.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js";import"../../analytics-chips-and-dropdowns/chart/Pie/PieChart.js";import"../../analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js";import"../../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarChart.js";import"../../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.js";import"../../analytics-chips-and-dropdowns/chart/StackedBarChart/StackedBarDistributionChart.model.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js";import"../../analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js";import"../../analytics-chips-and-dropdowns/chart/heatmap/HeatMapVertical.js";import"../../analytics-chips-and-dropdowns/chart/VerticalBarAndLinearGraph/VerticalBarAndLinearGraph.js";import"../../dropdown/DropdownPopover/index.js";import{Dropdown as e}from"../../dropdown/Dropdown.js";import{ChipDropdown as a}from"../../dropdown/ChipDropdown.js";import"../../zeroState/ZeroState.js";import"../../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../../checkBox/CheckBox.styled.js";import"../../list-item/ListItem.js";import"../../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../../button/Button.js";import"../../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../../input/Input.js";import"../../dropdown/MenuItem/MenuItem.js";import{FilterType as n}from"../types/SearchFilter.type.js";import{DatePickerButton as r}from"./DatePickerButton.js";import{DateRangeOnlyButton as i}from"./DateRangeOnlyButton.js";const p=[{label:"Last 7 days",value:"7 days",key:7,noOfDays:7},{label:"Last 30 days",value:"30 days",key:30,noOfDays:30},{label:"Custom range",value:"calender",key:"custom",isCustom:!0,dateRangeSelectionOptions:{selectRange:!0}}],s=s=>{var d,l,c;return s.type===n.Date?t(r,Object.assign({},s,{variant:s.variant,onSelect:t=>s.onChange(t)})):s.type===n.DateRange?s.rangePickerDateOnly?t(i,Object.assign({},s,{variant:s.variant,onSelect:t=>s.onChange(t)})):t(o,{datePickerPlacement:s.datePickerPlacement,variant:s.variant,placeholder:s.text,options:s.preset?p:null!==(d=s.options)&&void 0!==d?d:[],onOptionSelected:function(t){var o,e;t.selectedRange&&s.onChange([null===(o=t.selectedRange)||void 0===o?void 0:o[0],null===(e=t.selectedRange)||void 0===e?void 0:e[1]])}},s.id):"small"===s.variant?t(a,{isMultiSelect:s.type===n.Multiple,options:null!==(l=s.options)&&void 0!==l?l:[],defaultOptions:s.defaultValue,onSelect:s.onChange,placeHolder:s.text}):t(e,{isMultiSelect:s.type===n.Multiple,size:"small",options:null!==(c=s.options)&&void 0!==c?c:[],defaultOptions:s.defaultValue,onSelect:s.onChange,placeHolder:s.text,width:10*s.text.length+"px"})};export{s as SearchFilterItem};

package/dist/esm/components/SearchFilter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchFilterProps } from './types/SearchFilter.type';
+export declare const SearchFilter: React.FC<SearchFilterProps>;

package/dist/esm/components/SearchFilter/index.js

@@ -0,0 +1 @@
+import{useRef as e,useState as t,createElement as i}from"react";import{jsxs as r,jsx as l}from"react/jsx-runtime";import{SearchBar as n}from"../searchBar/searchBar.js";import{FilterChipListRenderer as a}from"./components/FilterChipListRenderer.js";import{SearchFilterItem as s}from"./components/SearchFilterItem.js";import{FilterType as d}from"./types/SearchFilter.type.js";const c=c=>{let{direction:o="row",schema:u,variant:p,onChange:f,showSelectedChips:v}=c;var m,h,g;const y=e(null!==(m=null==u?void 0:u.filter((e=>e.defaultValue)).map((e=>({id:e.id,value:e.defaultValue,type:e.type,text:e.text}))))&&void 0!==m?m:[]),[x,j]=t([]),b=u.find((e=>e.type===d.Search)),w=e=>{b&&"string"==typeof e&&O(b.id,e)},O=(e,t)=>{const i=u.find((t=>t.id===e)),r=[...x];if(i){const l=r.findIndex((t=>t.id===e));-1!==l?r[l]={id:i.id,value:t}:r.push({id:i.id,value:t});const n=y.current.find((t=>t.id===e));y.current=n?y.current.map((i=>i.id===e?{id:i.id,value:t,type:i.type,text:i.text}:i)):[...y.current,{id:e,value:t,type:i.type,text:i.text}],f(i.id,y.current,t),j([...r])}};return r("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8}},{children:[r("div",Object.assign({style:{display:"flex",flexDirection:o,gap:8,flexWrap:"wrap",alignItems:"row"===o?"center":"self-start"}},{children:[b&&l(n,{width:null!==(g=null===(h=b.width)||void 0===h?void 0:h.toString())&&void 0!==g?g:"100%",isEnabled:!0,onChange:w,onEnter:w,placeholder:b.text,variant:"small"}),l("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8,flexWrap:"wrap",alignItems:"row"===o?"center":"self-start"}},{children:u.filter((e=>e.type!==d.Search)).map(((e,t)=>i(s,Object.assign({},e,{key:t,variant:p,onChange:t=>{O(e.id,t)}}))))}))]})),v&&l("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:l(a,{selectedState:y.current,onDeSelect:(e,t)=>{const i=u.find((t=>t.id===e));let r=[...x];i&&(i.type===d.Multiple?(r=r.map((i=>{if(i.id===e){const e=i.value.filter((e=>e.value!==t.value));return e.length?Object.assign(Object.assign({},i),{value:e}):null}return i})).filter((e=>!!e)),y.current=y.current.map((i=>{var r;if(i.id===e){const e=null===(r=i.value)||void 0===r?void 0:r.filter((e=>e.value!==t.value));return e.length?Object.assign(Object.assign({},i),{value:e}):null}return i})).filter((e=>!!e))):(r=r.filter((t=>t.id!==e)),y.current=y.current.filter((t=>t.id!==e))),f(i.id,y.current,t),j([...r]))}})}))]}))};export{c as SearchFilter};

package/dist/esm/components/SearchFilter/types/SearchFilter.type.d.ts

@@ -0,0 +1,37 @@
+import { DropDirection } from 'react-bootstrap/esm/DropdownContext';
+import { DropdownOptions } from "../../analytics-chips-and-dropdowns";
+import { DropdownOption } from "../../dropdown/type";
+import { InputVariant } from "../../input";
+export declare enum FilterType {
+    Date = "Date",
+    DateRange = "DateRange",
+    Multiple = "Multiple",
+    Single = "Single",
+    Search = "Search"
+}
+export type FilterValueType = DropdownOption | DropdownOption[] | Date | Date[] | string;
+export type SearchFilterOutputState = {
+    id: string;
+    type: FilterType;
+    value?: FilterValueType;
+    text: string;
+};
+export type FilterSchema = {
+    id: string;
+    type: FilterType;
+    text: string;
+    options?: DropdownOption[] | DropdownOptions[];
+    preset?: boolean;
+    defaultValue?: FilterValueType;
+    width?: number | string;
+    datePickerPlacement?: DropDirection;
+    /** show oly the picker like date filter instead of dropdown */
+    rangePickerDateOnly?: boolean;
+};
+export type SearchFilterProps = {
+    variant: InputVariant;
+    showSelectedChips: boolean;
+    direction: 'row' | 'column';
+    schema: FilterSchema[];
+    onChange: (id: string, selectedStates: SearchFilterOutputState[], value?: FilterValueType) => void;
+};

package/dist/esm/components/SearchFilter/types/SearchFilter.type.js

@@ -0,0 +1 @@
+var e;!function(e){e.Date="Date",e.DateRange="DateRange",e.Multiple="Multiple",e.Single="Single",e.Search="Search"}(e||(e={}));export{e as FilterType};

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

@@ -4,6 +4,7 @@ export type TablePaginationProps = {
     pageSize: 5 | 10 | 20;
     pageNumber: number;
     totalRows: number;
+    hidePageSizeOptions?: boolean;
     updatePageNumber: (pageNumber: number) => void;
     updatePageSize: (option: DropdownOption | DropdownOption[]) => void;
 };

package/dist/esm/components/TablePagination/TablePagination.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import s from"../../assets/icons/chevronRight.svg.js";import{StyledTablePaginationContainer as r,StyledPagingContainer as n}from"./TablePagination.styled.js";import{DEFAULT_THEME as i}from"../../constants/Theme.js";import{Dropdown as a}from"../dropdown/Dropdown.js";import{BodySecondary as c}from"../TypographyStyle.js";const l=l=>{let{pageNumber:p,pageSize:d,totalRows:g,updatePageNumber:h,updatePageSize:m}=l;const b=i.colorsV2,j=(p-1)*d+1,v=(p-1)*d+d,u=Math.ceil(g/d),y=1==u;let f=[];f=u>=5?p===u?[p-4,p-3,p-2,p-1,p]:1===p?[p,p+1,p+2,p+3,p+4]:2===p?[p-1,p,p+1,p+2,p+3]:p===u-1?[p-3,p-2,p-1,p,p+1]:[p-2,p-1,p,p+1,p+2]:Array.from({length:u},((e,t)=>t+1));return e(r,{children:[t("div",{children:t(a,{options:[{label:"5 rows per page",value:"5",selected:5===d},{label:"10 rows per page",value:"10",selected:10===d},{label:"20 rows per page",value:"20",selected:20===d}],onSelect:m,width:"190px"})}),e("div",Object.assign({className:"paging__container"},{children:[g&&e(c,Object.assign({style:{color:b.content.placeholder,marginRight:8}},{children:["Showing ",j,"-",v>g?g:v," of"," ",g," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!y&&t(n,Object.assign({active:!1,onClick:()=>h(Math.max(p-1,1))},{children:t(o,{color:b.content.secondary,height:14,width:14})})),f.map((e=>t(n,Object.assign({active:e==p,onClick:()=>h(e)},{children:t(c,Object.assign({style:{color:e==p?b.content.primaryInverse:b.content.secondary}},{children:e}))}),e))),!y&&t(n,Object.assign({isLast:!0,active:!1,onClick:()=>h(Math.min(p+1,u))},{children:t(s,{color:b.content.secondary,height:14,width:14})}))]}))]}))]})};export{l as TablePagination};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import s from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight.svg.js";import{StyledTablePaginationContainer as i,StyledPagingContainer as n}from"./TablePagination.styled.js";import{DEFAULT_THEME as a}from"../../constants/Theme.js";import{Dropdown as r}from"../dropdown/Dropdown.js";import{BodySecondary as c}from"../TypographyStyle.js";const l=l=>{let{pageNumber:d,pageSize:p,totalRows:g,updatePageNumber:h,updatePageSize:m,hidePageSizeOptions:b}=l;const j=a.colorsV2,v=(d-1)*p+1,y=(d-1)*p+p,f=Math.ceil(g/p),u=1==f;let w=[];w=f>=5?d===f?[d-4,d-3,d-2,d-1,d]:1===d?[d,d+1,d+2,d+3,d+4]:2===d?[d-1,d,d+1,d+2,d+3]:d===f-1?[d-3,d-2,d-1,d,d+1]:[d-2,d-1,d,d+1,d+2]:Array.from({length:f},((e,t)=>t+1));return e(i,{children:[!b&&t("div",{children:t(r,{size:"small",options:[{label:"5 rows per page",value:"5",selected:5===p},{label:"10 rows per page",value:"10",selected:10===p},{label:"20 rows per page",value:"20",selected:20===p}],onSelect:m,width:"162px"})}),e("div",Object.assign({className:"paging__container"},{children:[!b&&g&&e(c,Object.assign({style:{color:j.content.placeholder,marginRight:8}},{children:["Showing ",v,"-",y>g?g:y," of"," ",g," results"]})),e("div",Object.assign({className:"pages__buttons-container"},{children:[!u&&t(n,Object.assign({active:!1,onClick:()=>{1!==d&&h(Math.max(d-1,1))},disabled:1===d},{children:t(s,{color:j.content.secondary,height:14,width:14})})),w.map((e=>t(n,Object.assign({active:e==d,onClick:()=>h(e),style:{display:1==e&&g<=p?"none":"flex"}},{children:t(c,Object.assign({style:{color:e==d?j.content.primaryInverse:j.content.secondary}},{children:e}))}),e))),!u&&t(n,Object.assign({isLast:!0,active:!1,onClick:()=>{d!==f&&h(Math.min(d+1,f))},disabled:d===f},{children:t(o,{color:j.content.secondary,height:14,width:14})}))]}))]}))]})};export{l as TablePagination};

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

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

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

@@ -1,16 +1,16 @@
 import r from"styled-components";import{DEFAULT_THEME as t}from"../../constants/Theme.js";const o=r.div`
-	background-color: ${t.colorsV2.surface.standard};
+	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;
-		margin-right: 16px;
 		justify-content: center;
 		align-items: center;
 	}
@@ -32,4 +32,7 @@ import r from"styled-components";import{DEFAULT_THEME as t}from"../../constants/
 	align-items: center;
 	justify-content: center;
 	border-right: ${r=>r.isLast?"none":`1px solid ${t.colorsV2.stroke.primary}`};
+	&:hover {
+		cursor: ${r=>r.disabled?"not-allowed":"pointer"};
+	}
 `;export{e as StyledPagingContainer,o as StyledTablePaginationContainer};

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

@@ -0,0 +1,7 @@
+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;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TablePaginationCard: React.FC<TablePaginationProps>;

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

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{jsx as b}from"react/jsx-runtime";import{TablePagination as e}from"./TablePagination.js";import{COLORS as t}from"../../constants/Theme.js";const a=c("div","production"===process.env.NODE_ENV?{target:"exfv5q90"}:{target:"exfv5q90",label:"TablePaginationCardStyled"})("background:",t.surface.standard,";border:1px solid ",t.stroke.primary,";border-radius:4px;display:flex;justify-content:center;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhYmxlUGFnaW5hdGlvbkNhcmQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvRCIsImZpbGUiOiJUYWJsZVBhZ2luYXRpb25DYXJkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgVGFibGVQYWdpbmF0aW9uLCB9IGZyb20gXCIuL1RhYmxlUGFnaW5hdGlvblwiO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBUYWJsZVBhZ2luYXRpb25DYXJkU3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdGJhY2tncm91bmQ6ICR7Q09MT1JTLnN1cmZhY2Uuc3RhbmRhcmR9O1xuXHRib3JkZXI6IDFweCBzb2xpZCAke0NPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcblx0ZGlzcGxheTogZmxleDtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5gO1xyXG5leHBvcnQgY29uc3QgVGFibGVQYWdpbmF0aW9uQ2FyZCA9IChwcm9wcykgPT4ge1xyXG4gICAgcmV0dXJuIChfanN4KFRhYmxlUGFnaW5hdGlvbkNhcmRTdHlsZWQsIHsgY2hpbGRyZW46IF9qc3goVGFibGVQYWdpbmF0aW9uLCBPYmplY3QuYXNzaWduKHt9LCBwcm9wcykpIH0pKTtcclxufTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VGFibGVQYWdpbmF0aW9uQ2FyZC5qcy5tYXAiXX0= */")),l=c=>b(a,{children:b(e,Object.assign({},c))});export{l as TablePaginationCard,a as TablePaginationCardStyled};

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

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

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

@@ -1,17 +1,89 @@
-export declare const TitleLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleMedium: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleSmall: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Display: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyPrimary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodySecondary: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyPrimaryLink: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodySecondaryLink: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyTiny: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonLarge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubHeading: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BodyRegular: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Caption: import("styled-components").StyledComponent<"div", any, {}, 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>;

package/dist/esm/components/TypographyStyle.js

@@ -1,100 +1,233 @@
-import t from"styled-components";import{COLORS as e,FONTS as i}from"../constants/Theme.js";const o=t=>t+"px",n=t.div`
+import e from"styled-components";import{COLORS as t,FONTS as i}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.titleLarge.fontWeight};
 	font-size: ${o(i.titleLarge.fontSize)};
 	line-height: ${o(i.titleLarge.lineHeight)};
-`,r=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,r=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.titleMedium.fontWeight};
 	font-size: ${o(i.titleMedium.fontSize)};
 	line-height: ${o(i.titleMedium.lineHeight)};
-`,l=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,l=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
+	font-weight: ${i.title4.fontWeight};
+	font-size: ${o(i.title4.fontSize)};
+	line-height: ${o(i.title4.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||t.text.primary};
 	font-weight: ${i.titleRegular.fontWeight};
 	font-size: ${o(i.titleRegular.fontSize)};
 	line-height: ${o(i.titleRegular.lineHeight)};
-`,f=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,f=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.titleSmall.fontWeight};
 	font-size: ${o(i.titleSmall.fontSize)};
 	line-height: ${o(i.titleSmall.lineHeight)};
-`,g=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,b=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.display.fontWeight};
 	font-size: ${o(i.display.fontSize)};
 	line-height: ${o(i.display.lineHeight)};
-`,a=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,d=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.bodyPrimary.fontWeight};
 	font-size: ${o(i.bodyLarge.fontSize)};
 	line-height: ${o(i.bodyLarge.lineHeight)};
-`,h=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,c=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.bodyPrimary.fontWeight};
 	font-size: ${o(i.bodyPrimary.fontSize)};
 	line-height: ${o(i.bodyPrimary.lineHeight)};
-`,$=t.div`
+	-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||t.text.primary};
+	font-weight: ${i.bodySecondary.fontWeight};
+	font-size: ${o(i.bodySecondary.fontSize)};
+	line-height: ${o(i.bodySecondary.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,h=e.div`
 	font-family: Inter;
-	color: ${e.content.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.bodySecondary.fontWeight};
 	font-size: ${o(i.bodySecondary.fontSize)};
 	line-height: ${o(i.bodySecondary.lineHeight)};
-`,c=t(h)`
+	-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;
+`,w=e(c)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${t.content.brand};
+	text-decoration-color: ${t.content.brand};
 	cursor: pointer;
-`,y=t($)`
+`,$=e(g)`
 	text-decoration: underline;
-	color: ${e.content.brand};
-	text-decoration-color: ${e.content.brand};
+	color: ${t.content.brand};
+	text-decoration-color: ${t.content.brand};
 	cursor: pointer;
-`,d=t.div`
+`,p=e.div`
+	font-family: Inter;
+	color: ${e=>e.color||t.text.primary};
+	font-weight: ${i.caption.fontWeight};
+	font-size: ${o(i.caption.fontSize)};
+	line-height: ${o(i.caption.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,m=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.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};
+	-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;
+`,y=e.div`
+	color: ${e=>e.color||t.text.primary};
+	font-weight: ${i.tiny.fontWeight};
+	font-size: ${o(i.tiny.fontSize)};
+	line-height: ${o(i.tiny.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,x=e.div`
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.tiny.fontWeight};
 	font-size: ${o(i.tiny.fontSize)};
 	line-height: ${o(i.tiny.lineHeight)};
-`,p=t.div`
+	-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||t.text.primary};
+	font-weight: ${i.buttonLarge.fontWeight};
+	font-size: ${o(i.buttonLarge.fontSize)};
+	line-height: ${o(i.buttonLarge.lineHeight)};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,k=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.buttonLarge.fontWeight};
 	font-size: ${o(i.buttonLarge.fontSize)};
 	line-height: ${o(i.buttonLarge.lineHeight)};
-`,z=t.div`
+	-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: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.buttonRegular.fontWeight};
 	font-size: ${o(i.buttonRegular.fontSize)};
 	line-height: ${o(i.buttonRegular.lineHeight)};
-`,s=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,v=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.subHeading.fontWeight};
 	font-size: ${o(i.subHeading.fontSize)};
 	line-height: ${o(i.subHeading.lineHeight)};
-`,b=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,z=e.div`
 	font-family: Inter;
-	color: ${t=>t.color||e.text.primary};
+	color: ${e=>e.color||t.text.primary};
 	font-weight: ${i.bodyRegular.fontWeight};
 	font-size: ${o(i.bodyRegular.fontSize)};
 	line-height: ${o(i.bodyRegular.lineHeight)};
-`,u=t.div`
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`,L=e.div`
 	font-family: Inter;
-	color: ${e.text.primary};
+	color: ${t.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};
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: ${e=>e.numberOfLines};
+`;export{m as AiBodyCaption,x as AiBodyTiny,p as BodyCaption,d as BodyLarge,c as BodyPrimary,w as BodyPrimaryLink,z as BodyRegular,g as BodySecondary,$ as BodySecondaryLink,y as BodyTiny,s as ButtonLarge,k as ButtonLargeAI,u as ButtonRegular,h as ButtonRegularAI,L as Caption,b as Display,l as SmallRegular,v as SubHeading,n as TitleLarge,r as TitleMedium,a as TitleRegular,f as TitleSmall};

package/dist/esm/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/esm/components/WhatsAppTextEditor/CustomEditor.styled.js

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{COLORS as b}from"../../constants/Theme.js";const l=c("div","production"===process.env.NODE_ENV?{target:"e91dva42"}:{target:"e91dva42",label:"Container"})("background:",b.surface.standard,";border:",(c=>c.isError?2:1),"px solid ",(c=>c.isError?b.stroke.negative.vibrant:b.stroke.primary),";border-radius:4px;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbUVkaXRvci5zdHlsZWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRW9DIiwiZmlsZSI6IkN1c3RvbUVkaXRvci5zdHlsZWQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5zdXJmYWNlLnN0YW5kYXJkfTtcblx0Ym9yZGVyOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzRXJyb3IgPyAyIDogMSl9cHggc29saWRcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaXNFcnJvciA/IENPTE9SUy5zdHJva2UubmVnYXRpdmUudmlicmFudCA6IENPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcbmA7XHJcbmV4cG9ydCBjb25zdCBUZXh0U3BhY2UgPSBzdHlsZWQudGV4dGFyZWEgYFxuXHR3aWR0aDogMTAwJTtcblxuXHRib3JkZXI6IDA7XG5cdHBhZGRpbmc6IDEycHggMTZweDtcblx0cmVzaXplOiBub25lO1xuXHRjb2xvcjogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyOiAwO1xuXHRcdG91dGxpbmU6IDA7XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRnYXA6IDhweDtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUN1c3RvbUVkaXRvci5zdHlsZWQuanMubWFwIl19 */")),d=c("textarea","production"===process.env.NODE_ENV?{target:"e91dva41"}:{target:"e91dva41",label:"TextSpace"})("width:100%;border:0;padding:12px 16px;resize:none;color:",b.content.primary,";&:focus-within{border:0;outline:0;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkN1c3RvbUVkaXRvci5zdHlsZWQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUXlDIiwiZmlsZSI6IkN1c3RvbUVkaXRvci5zdHlsZWQudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRiYWNrZ3JvdW5kOiAke0NPTE9SUy5zdXJmYWNlLnN0YW5kYXJkfTtcblx0Ym9yZGVyOiAkeyhwcm9wcykgPT4gKHByb3BzLmlzRXJyb3IgPyAyIDogMSl9cHggc29saWRcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuaXNFcnJvciA/IENPTE9SUy5zdHJva2UubmVnYXRpdmUudmlicmFudCA6IENPTE9SUy5zdHJva2UucHJpbWFyeX07XG5cdGJvcmRlci1yYWRpdXM6IDRweDtcbmA7XHJcbmV4cG9ydCBjb25zdCBUZXh0U3BhY2UgPSBzdHlsZWQudGV4dGFyZWEgYFxuXHR3aWR0aDogMTAwJTtcblxuXHRib3JkZXI6IDA7XG5cdHBhZGRpbmc6IDEycHggMTZweDtcblx0cmVzaXplOiBub25lO1xuXHRjb2xvcjogJHtDT0xPUlMuY29udGVudC5wcmltYXJ5fTtcblxuXHQmOmZvY3VzLXdpdGhpbiB7XG5cdFx0Ym9yZGVyOiAwO1xuXHRcdG91dGxpbmU6IDA7XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBPdXRlckNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRnYXA6IDhweDtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUN1c3RvbUVkaXRvci5zdHlsZWQuanMubWFwIl19 */")),X=c("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)."}});export{l as Container,X as OuterContainer,d as TextSpace};

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

@@ -0,0 +1,40 @@
+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;
+};
+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;
+} & React.RefAttributes<CustomEditorRef>>;

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

@@ -0,0 +1 @@
+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 u,useImperativeHandle as c,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]:"~"},T=i.forwardRef(((o,i)=>{var f,T,{onChange:C,text:E,RightComponent:y,error:O,limit:w,onError:H,rows:L,actions:S}=o,b=t(o,["onChange","text","RightComponent","error","limit","onError","rows","actions"]);const R=u(null);function W(t){const n=null==R?void 0:R.current;null!=n&&(n.selectionStart?(n.focus(),n.selectionEnd=t):n.focus())}function A(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart,e=R.current.selectionEnd,l=t;if(n===e)return I(l);{r=x.wrappWildcard(n,e,l,r);const t=x.getHTML(r);return R.current.value=r,{text:r,html:t}}}return{text:r,html:r}}function I(t){var n,e;let r=null!==(e=null===(n=R.current)||void 0===n?void 0:n.value)&&void 0!==e?e:"";if(R.current&&t){const n=R.current.selectionStart;if(n===R.current.selectionEnd)return M(t,n)}return{text:r,html:r}}function M(t,n){var e,r;let l=null!==(r=null===(e=R.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 R.current.value=l,{text:l,html:o}}return c(i,(()=>({addTextOrWrap:A,addText:I,get(){var t,n;return null!==(n=null===(t=R.current)||void 0===t?void 0:t.value)&&void 0!==n?n:""},setCaretPosition:W}))),s((()=>{if(null==R?void 0:R.current){R.current.value=E||"";const t=x.getHTML(E||"");null==C||C(E||"",t)}}),[E]),s((()=>{var t,n;(null===(t=null==R?void 0:R.current)||void 0===t?void 0:t.value)&&w&&((null===(n=null==R?void 0:R.current)||void 0===n?void 0:n.value.length)>w?null==H||H(p):null==H||H(null!=O?O:""))}),[null===(f=null==R?void 0:R.current)||void 0===f?void 0:f.value.length]),n(v,{children:[n(m,Object.assign({isError:!!O},{children:[e(g,{actions:S,ref:R,onActionSelect:function(t){if((null==j?void 0:j[t])&&R.current){const n=R.current.selectionStart;if(n===R.current.selectionEnd){M(null==j?void 0:j[t],n);const{text:e,html:r}=M(null==j?void 0:j[t],n);W(n+1),null==C||C(e,r)}else{const{text:n,html:e}=A(null==j?void 0:j[t]);null==C||C(n,e)}}},RightComponent:y,onEmojiClick:function(t){const{text:n,html:e}=I(t);null==C||C(n,e)}}),e(h,Object.assign({ref:R,onChange:function(t){const n=t.target.value,e=x.getHTML(n);null==C||C(n,e)}},b,{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==R?void 0:R.current)?n(d,Object.assign({style:{color:O===p||(null===(T=null==R?void 0:R.current)||void 0===T?void 0:T.value.length)>w?a.content.negative:a.content.secondary}},{children:[R.current.value.length,"/",w]})):e(r,{})})]})}));T.displayName="WhatsAppTextEditor";export{T as WhatsAppTextEditor};

package/dist/esm/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>>;